From 37588ffb5e856d7a16fbb5e1161d13667bd90f78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?home=E5=AD=99?= <1162067978@qq.com>
Date: Sat, 7 Jun 2025 16:34:18 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E6=95=B0=E6=8D=AE=E5=86=85=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=8F=96=E6=B6=88=E6=8B=96=E6=8B=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/page/largeScreen1.vue | 690 +-------------------------------
 1 file changed, 21 insertions(+), 669 deletions(-)

diff --git a/src/views/page/largeScreen1.vue b/src/views/page/largeScreen1.vue
index 4e85fa3a..a601d38f 100644
--- a/src/views/page/largeScreen1.vue
+++ b/src/views/page/largeScreen1.vue
@@ -1380,678 +1380,30 @@ export default {
     },
 
     drag_boxHandler(id) {
-      console.log(id,111);
       let demo = this.$refs[`drag_box${id}`];
       demo = document.querySelector(`.drag_box${id}`); //待拖拽元素
-      let canMove = false; //拖拽状态
-      let x = 0,
-        y = 0; //鼠标位置
-      //监听按下鼠标事件
-      demo.onmousedown = function (e) {
-        x = e.pageX - demo.offsetLeft;
-        y = e.pageY - demo.offsetTop;
-        canMove = true; //激活拖拽状态
-      };
-      //监听右击鼠标事件
-      demo.oncontextmenu = function (e) {
-        e.preventDefault(); //阻止默认行为
-      };
-      //监听鼠标抬起事件
-      window.onmouseup = function () {
-        canMove = false; //关闭拖拽状态
-      };
+   let scale = 1; // 初始缩放比例
 
-      window.onblur = function () {
-        //窗口失去焦点事件
-        canMove = false; //关闭拖拽状态
-      };
-
-      //监听鼠标移动事件
-      window.onmousemove = function (e) {
-        e.preventDefault(); //阻止默认行为(字不能拖走)
-        if (canMove) {
-          //对范围判断
-          let left = e.pageX - x;
-          let top = e.pageY - y;
-
-          //if (left > 0) left = 0 //当距离左边小于0时 让它为0
-          //if (top > 0) top = 0 //当距离上边小于0时 让它为0
-          // //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
-          // let maxLeft = window.innerWidth - demo.offsetWidth
-          // //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
-          // let maxTop = window.innerHeight - demo.offsetHeight
-
-          // if (left > maxLeft) left = maxLeft
-          // if (top > maxTop) top = maxTop
-
-          demo.style.left = left + "px";
-          demo.style.top = top + "px";
-        }
-      };
-      let scale = 1;
-      demo.onwheel = function (e) {
-        if (e.wheelDelta > 0) {
-          scale += 0.05;
-          if (scale > 4) {
-            scale = 4;
-          }
-          demo.style.transform = `scale(${scale})`;
-          // console.log(scale);
-        } else {
-          scale -= 0.05;
-          if (scale < 1) {
-            scale = 1;
-          }
-          demo.style.transform = `scale(${scale})`;
-          // console.log(scale);
-        }
-      };
-    },
-
-    drag_boxHandler1() {
-      let demo = this.$refs.drag_box2;
-      demo = document.querySelector(".drag_box2"); //待拖拽元素
-      let canMove = false; //拖拽状态
-      let x = 0,
-        y = 0; //鼠标位置
-      //监听按下鼠标事件
-      demo.onmousedown = function (e) {
-        x = e.pageX - demo.offsetLeft;
-        y = e.pageY - demo.offsetTop;
-        canMove = true; //激活拖拽状态
-      };
-      //监听右击鼠标事件
-      demo.oncontextmenu = function (e) {
-        e.preventDefault(); //阻止默认行为
-      };
-      //监听鼠标抬起事件
-      window.onmouseup = function () {
-        canMove = false; //关闭拖拽状态
-      };
-
-      window.onblur = function () {
-        //窗口失去焦点事件
-        canMove = false; //关闭拖拽状态
-      };
-
-      //监听鼠标移动事件
-      window.onmousemove = function (e) {
-        e.preventDefault(); //阻止默认行为(字不能拖走)
-        if (canMove) {
-          //对范围判断
-          let left = e.pageX - x;
-          let top = e.pageY - y;
-
-          //if (left > 0) left = 0 //当距离左边小于0时 让它为0
-          //if (top > 0) top = 0 //当距离上边小于0时 让它为0
-          // //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
-          // let maxLeft = window.innerWidth - demo.offsetWidth
-          // //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
-          // let maxTop = window.innerHeight - demo.offsetHeight
-
-          // if (left > maxLeft) left = maxLeft
-          // if (top > maxTop) top = maxTop
-
-          demo.style.left = left + "px";
-          demo.style.top = top + "px";
-        }
-      };
-      let scale = 1;
-      demo.onwheel = function (e) {
-        if (e.wheelDelta > 0) {
-          scale += 0.05;
-          if (scale > 4) {
-            scale = 4;
-          }
-          demo.style.transform = `scale(${scale})`;
-          // console.log(scale);
-        } else {
-          scale -= 0.05;
-          if (scale < 1) {
-            scale = 1;
-          }
-          demo.style.transform = `scale(${scale})`;
-          // console.log(scale);
-        }
-      };
-    },
-      drag_boxHandler13() {
-      let demo = this.$refs.drag_box13;
-      demo = document.querySelector(".drag_box13"); //待拖拽元素
-      let canMove = false; //拖拽状态
-      let x = 0,
-        y = 0; //鼠标位置
-      //监听按下鼠标事件
-      demo.onmousedown = function (e) {
-        x = e.pageX - demo.offsetLeft;
-        y = e.pageY - demo.offsetTop;
-        canMove = true; //激活拖拽状态
-      };
-      //监听右击鼠标事件
-      demo.oncontextmenu = function (e) {
-        e.preventDefault(); //阻止默认行为
-      };
-      //监听鼠标抬起事件
-      window.onmouseup = function () {
-        canMove = false; //关闭拖拽状态
-      };
-
-      window.onblur = function () {
-        //窗口失去焦点事件
-        canMove = false; //关闭拖拽状态
-      };
-
-      //监听鼠标移动事件
-      window.onmousemove = function (e) {
-        e.preventDefault(); //阻止默认行为(字不能拖走)
-        if (canMove) {
-          //对范围判断
-          let left = e.pageX - x;
-          let top = e.pageY - y;
-
-          //if (left > 0) left = 0 //当距离左边小于0时 让它为0
-          //if (top > 0) top = 0 //当距离上边小于0时 让它为0
-          // //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
-          // let maxLeft = window.innerWidth - demo.offsetWidth
-          // //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
-          // let maxTop = window.innerHeight - demo.offsetHeight
-
-          // if (left > maxLeft) left = maxLeft
-          // if (top > maxTop) top = maxTop
-
-          demo.style.left = left + "px";
-          demo.style.top = top + "px";
-        }
-      };
-      let scale = 1;
-      demo.onwheel = function (e) {
-        if (e.wheelDelta > 0) {
-          scale += 0.05;
-          if (scale > 4) {
-            scale = 4;
-          }
-          demo.style.transform = `scale(${scale})`;
-          // console.log(scale);
-        } else {
-          scale -= 0.05;
-          if (scale < 1) {
-            scale = 1;
-          }
-          demo.style.transform = `scale(${scale})`;
-          // console.log(scale);
-        }
-      };
-    },
-    drag_boxHandler12() {
-      let demo = this.$refs.drag_box12;
-      demo = document.querySelector(".drag_box12"); //待拖拽元素
-      let canMove = false; //拖拽状态
-      let x = 0,
-        y = 0; //鼠标位置
-      //监听按下鼠标事件
-      demo.onmousedown = function (e) {
-        x = e.pageX - demo.offsetLeft;
-        y = e.pageY - demo.offsetTop;
-        canMove = true; //激活拖拽状态
-      };
-      //监听右击鼠标事件
-      demo.oncontextmenu = function (e) {
-        e.preventDefault(); //阻止默认行为
-      };
-      //监听鼠标抬起事件
-      window.onmouseup = function () {
-        canMove = false; //关闭拖拽状态
-      };
-
-      window.onblur = function () {
-        //窗口失去焦点事件
-        canMove = false; //关闭拖拽状态
-      };
-
-      //监听鼠标移动事件
-      window.onmousemove = function (e) {
-        e.preventDefault(); //阻止默认行为(字不能拖走)
-        if (canMove) {
-          //对范围判断
-          let left = e.pageX - x;
-          let top = e.pageY - y;
-
-          //if (left > 0) left = 0 //当距离左边小于0时 让它为0
-          //if (top > 0) top = 0 //当距离上边小于0时 让它为0
-          // //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
-          // let maxLeft = window.innerWidth - demo.offsetWidth
-          // //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
-          // let maxTop = window.innerHeight - demo.offsetHeight
-
-          // if (left > maxLeft) left = maxLeft
-          // if (top > maxTop) top = maxTop
-
-          demo.style.left = left + "px";
-          demo.style.top = top + "px";
-        }
-      };
-      let scale = 1;
-      demo.onwheel = function (e) {
-        if (e.wheelDelta > 0) {
-          scale += 0.05;
-          if (scale > 4) {
-            scale = 4;
-          }
-          demo.style.transform = `scale(${scale})`;
-          // console.log(scale);
-        } else {
-          scale -= 0.05;
-          if (scale < 1) {
-            scale = 1;
-          }
-          demo.style.transform = `scale(${scale})`;
-          // console.log(scale);
-        }
-      };
-    },
-    drag_boxHandler11() {
-      let demo = this.$refs.drag_box11;
-      demo = document.querySelector(".drag_box11"); //待拖拽元素
-      let canMove = false; //拖拽状态
-      let x = 0,
-        y = 0; //鼠标位置
-      //监听按下鼠标事件
-      demo.onmousedown = function (e) {
-        x = e.pageX - demo.offsetLeft;
-        y = e.pageY - demo.offsetTop;
-        canMove = true; //激活拖拽状态
-      };
-      //监听右击鼠标事件
-      demo.oncontextmenu = function (e) {
-        e.preventDefault(); //阻止默认行为
-      };
-      //监听鼠标抬起事件
-      window.onmouseup = function () {
-        canMove = false; //关闭拖拽状态
-      };
-
-      window.onblur = function () {
-        //窗口失去焦点事件
-        canMove = false; //关闭拖拽状态
-      };
-
-      //监听鼠标移动事件
-      window.onmousemove = function (e) {
-        e.preventDefault(); //阻止默认行为(字不能拖走)
-        if (canMove) {
-          //对范围判断
-          let left = e.pageX - x;
-          let top = e.pageY - y;
-
-          //if (left > 0) left = 0 //当距离左边小于0时 让它为0
-          //if (top > 0) top = 0 //当距离上边小于0时 让它为0
-          // //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
-          // let maxLeft = window.innerWidth - demo.offsetWidth
-          // //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
-          // let maxTop = window.innerHeight - demo.offsetHeight
-
-          // if (left > maxLeft) left = maxLeft
-          // if (top > maxTop) top = maxTop
-
-          demo.style.left = left + "px";
-          demo.style.top = top + "px";
-        }
-      };
-      let scale = 1;
-      demo.onwheel = function (e) {
-        if (e.wheelDelta > 0) {
-          scale += 0.05;
-          if (scale > 4) {
-            scale = 4;
-          }
-          demo.style.transform = `scale(${scale})`;
-          // console.log(scale);
-        } else {
-          scale -= 0.05;
-          if (scale < 1) {
-            scale = 1;
-          }
-          demo.style.transform = `scale(${scale})`;
-          // console.log(scale);
-        }
-      };
-    },
-    drag_boxHandler10() {
-      let demo = this.$refs.drag_box10;
-      demo = document.querySelector(".drag_box10"); //待拖拽元素
-      let canMove = false; //拖拽状态
-      let x = 0,
-        y = 0; //鼠标位置
-      //监听按下鼠标事件
-      demo.onmousedown = function (e) {
-        x = e.pageX - demo.offsetLeft;
-        y = e.pageY - demo.offsetTop;
-        canMove = true; //激活拖拽状态
-      };
-      //监听右击鼠标事件
-      demo.oncontextmenu = function (e) {
-        e.preventDefault(); //阻止默认行为
-      };
-      //监听鼠标抬起事件
-      window.onmouseup = function () {
-        canMove = false; //关闭拖拽状态
-      };
-
-      window.onblur = function () {
-        //窗口失去焦点事件
-        canMove = false; //关闭拖拽状态
-      };
-
-      //监听鼠标移动事件
-      window.onmousemove = function (e) {
-        e.preventDefault(); //阻止默认行为(字不能拖走)
-        if (canMove) {
-          //对范围判断
-          let left = e.pageX - x;
-          let top = e.pageY - y;
-
-          //if (left > 0) left = 0 //当距离左边小于0时 让它为0
-          //if (top > 0) top = 0 //当距离上边小于0时 让它为0
-          // //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
-          // let maxLeft = window.innerWidth - demo.offsetWidth
-          // //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
-          // let maxTop = window.innerHeight - demo.offsetHeight
-
-          // if (left > maxLeft) left = maxLeft
-          // if (top > maxTop) top = maxTop
-
-          demo.style.left = left + "px";
-          demo.style.top = top + "px";
-        }
-      };
-      let scale = 1;
-      demo.onwheel = function (e) {
-        if (e.wheelDelta > 0) {
-          scale += 0.05;
-          if (scale > 4) {
-            scale = 4;
-          }
-          demo.style.transform = `scale(${scale})`;
-          // console.log(scale);
-        } else {
-          scale -= 0.05;
-          if (scale < 1) {
-            scale = 1;
-          }
-          demo.style.transform = `scale(${scale})`;
-          // console.log(scale);
-        }
-      };
-    },
-    drag_boxHandler9() {
-      let demo = this.$refs.drag_box9;
-      demo = document.querySelector(".drag_box9"); //待拖拽元素
-      let canMove = false; //拖拽状态
-      let x = 0,
-        y = 0; //鼠标位置
-      //监听按下鼠标事件
-      demo.onmousedown = function (e) {
-        x = e.pageX - demo.offsetLeft;
-        y = e.pageY - demo.offsetTop;
-        canMove = true; //激活拖拽状态
-      };
-      //监听右击鼠标事件
-      demo.oncontextmenu = function (e) {
-        e.preventDefault(); //阻止默认行为
-      };
-      //监听鼠标抬起事件
-      window.onmouseup = function () {
-        canMove = false; //关闭拖拽状态
-      };
-
-      window.onblur = function () {
-        //窗口失去焦点事件
-        canMove = false; //关闭拖拽状态
-      };
-
-      //监听鼠标移动事件
-      window.onmousemove = function (e) {
-        e.preventDefault(); //阻止默认行为(字不能拖走)
-        if (canMove) {
-          //对范围判断
-          let left = e.pageX - x;
-          let top = e.pageY - y;
-
-          //if (left > 0) left = 0 //当距离左边小于0时 让它为0
-          //if (top > 0) top = 0 //当距离上边小于0时 让它为0
-          // //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
-          // let maxLeft = window.innerWidth - demo.offsetWidth
-          // //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
-          // let maxTop = window.innerHeight - demo.offsetHeight
-
-          // if (left > maxLeft) left = maxLeft
-          // if (top > maxTop) top = maxTop
-
-          demo.style.left = left + "px";
-          demo.style.top = top + "px";
-        }
-      };
-      let scale = 1;
-      demo.onwheel = function (e) {
-        if (e.wheelDelta > 0) {
-          scale += 0.05;
-          if (scale > 4) {
-            scale = 4;
-          }
-          demo.style.transform = `scale(${scale})`;
-          // console.log(scale);
-        } else {
-          scale -= 0.05;
-          if (scale < 1) {
-            scale = 1;
-          }
-          demo.style.transform = `scale(${scale})`;
-          // console.log(scale);
-        }
-      };
-    },
-    drag_boxHandler8() {
-      let demo = this.$refs.drag_box8;
-      demo = document.querySelector(".drag_box8"); //待拖拽元素
-      let canMove = false; //拖拽状态
-      let x = 0,
-        y = 0; //鼠标位置
-      //监听按下鼠标事件
-      demo.onmousedown = function (e) {
-        x = e.pageX - demo.offsetLeft;
-        y = e.pageY - demo.offsetTop;
-        canMove = true; //激活拖拽状态
-      };
-      //监听右击鼠标事件
-      demo.oncontextmenu = function (e) {
-        e.preventDefault(); //阻止默认行为
-      };
-      //监听鼠标抬起事件
-      window.onmouseup = function () {
-        canMove = false; //关闭拖拽状态
-      };
-
-      window.onblur = function () {
-        //窗口失去焦点事件
-        canMove = false; //关闭拖拽状态
-      };
-
-      //监听鼠标移动事件
-      window.onmousemove = function (e) {
-        e.preventDefault(); //阻止默认行为(字不能拖走)
-        if (canMove) {
-          //对范围判断
-          let left = e.pageX - x;
-          let top = e.pageY - y;
-
-          //if (left > 0) left = 0 //当距离左边小于0时 让它为0
-          //if (top > 0) top = 0 //当距离上边小于0时 让它为0
-          // //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
-          // let maxLeft = window.innerWidth - demo.offsetWidth
-          // //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
-          // let maxTop = window.innerHeight - demo.offsetHeight
-
-          // if (left > maxLeft) left = maxLeft
-          // if (top > maxTop) top = maxTop
-
-          demo.style.left = left + "px";
-          demo.style.top = top + "px";
-        }
-      };
-      let scale = 1;
-      demo.onwheel = function (e) {
-        if (e.wheelDelta > 0) {
-          scale += 0.05;
-          if (scale > 4) {
-            scale = 4;
-          }
-          demo.style.transform = `scale(${scale})`;
-          // console.log(scale);
-        } else {
-          scale -= 0.05;
-          if (scale < 1) {
-            scale = 1;
-          }
-          demo.style.transform = `scale(${scale})`;
-          // console.log(scale);
-        }
-      };
-    },
-    drag_boxHandler7() {
-      let demo = this.$refs.drag_box7;
-      demo = document.querySelector(".drag_box7"); //待拖拽元素
-      let canMove = false; //拖拽状态
-      let x = 0,
-        y = 0; //鼠标位置
-      //监听按下鼠标事件
-      demo.onmousedown = function (e) {
-        x = e.pageX - demo.offsetLeft;
-        y = e.pageY - demo.offsetTop;
-        canMove = true; //激活拖拽状态
-      };
-      //监听右击鼠标事件
-      demo.oncontextmenu = function (e) {
-        e.preventDefault(); //阻止默认行为
-      };
-      //监听鼠标抬起事件
-      window.onmouseup = function () {
-        canMove = false; //关闭拖拽状态
-      };
-
-      window.onblur = function () {
-        //窗口失去焦点事件
-        canMove = false; //关闭拖拽状态
-      };
-
-      //监听鼠标移动事件
-      window.onmousemove = function (e) {
-        e.preventDefault(); //阻止默认行为(字不能拖走)
-        if (canMove) {
-          //对范围判断
-          let left = e.pageX - x;
-          let top = e.pageY - y;
-
-          //if (left > 0) left = 0 //当距离左边小于0时 让它为0
-          //if (top > 0) top = 0 //当距离上边小于0时 让它为0
-          // //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
-          // let maxLeft = window.innerWidth - demo.offsetWidth
-          // //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
-          // let maxTop = window.innerHeight - demo.offsetHeight
-
-          // if (left > maxLeft) left = maxLeft
-          // if (top > maxTop) top = maxTop
-
-          demo.style.left = left + "px";
-          demo.style.top = top + "px";
-        }
-      };
-      let scale = 1;
-      demo.onwheel = function (e) {
-        if (e.wheelDelta > 0) {
-          scale += 0.05;
-          if (scale > 4) {
-            scale = 4;
-          }
-          demo.style.transform = `scale(${scale})`;
-          // console.log(scale);
-        } else {
-          scale -= 0.05;
-          if (scale < 1) {
-            scale = 1;
-          }
-          demo.style.transform = `scale(${scale})`;
-          // console.log(scale);
-        }
-      };
-    },
-    drag_boxHandler5() {
-      let demo = this.$refs.drag_box5;
-      demo = document.querySelector(".drag_box5"); //待拖拽元素
-      let canMove = false; //拖拽状态
-      let x = 0,
-        y = 0; //鼠标位置
-      //监听按下鼠标事件
-      demo.onmousedown = function (e) {
-        x = e.pageX - demo.offsetLeft;
-        y = e.pageY - demo.offsetTop;
-        canMove = true; //激活拖拽状态
-      };
-      //监听右击鼠标事件
-      demo.oncontextmenu = function (e) {
-        e.preventDefault(); //阻止默认行为
-      };
-      //监听鼠标抬起事件
-      window.onmouseup = function () {
-        canMove = false; //关闭拖拽状态
-      };
-
-      window.onblur = function () {
-        //窗口失去焦点事件
-        canMove = false; //关闭拖拽状态
-      };
-
-      //监听鼠标移动事件
-      window.onmousemove = function (e) {
-        e.preventDefault(); //阻止默认行为(字不能拖走)
-        if (canMove) {
-          //对范围判断
-          let left = e.pageX - x;
-          let top = e.pageY - y;
-
-          //if (left > 0) left = 0 //当距离左边小于0时 让它为0
-          //if (top > 0) top = 0 //当距离上边小于0时 让它为0
-          // //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
-          // let maxLeft = window.innerWidth - demo.offsetWidth
-          // //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
-          // let maxTop = window.innerHeight - demo.offsetHeight
-
-          // if (left > maxLeft) left = maxLeft
-          // if (top > maxTop) top = maxTop
-
-          demo.style.left = left + "px";
-          demo.style.top = top + "px";
-        }
-      };
-      let scale = 1;
-      demo.onwheel = function (e) {
-        if (e.wheelDelta > 0) {
-          scale += 0.05;
-          if (scale > 4) {
-            scale = 4;
-          }
-          demo.style.transform = `scale(${scale})`;
-          // console.log(scale);
-        } else {
-          scale -= 0.05;
-          if (scale < 1) {
-            scale = 1;
-          }
-          demo.style.transform = `scale(${scale})`;
-          // console.log(scale);
-        }
-      };
-    },
-  },
+// 只保留滚轮缩放功能
+demo.onwheel = function(e) {
+  e.preventDefault(); // 阻止默认滚动行为
+  
+  if (e.deltaY < 0) { // 向上滚动，放大
+    scale += 0.05;
+    if (scale > 4) {
+      scale = 4; // 最大放大4倍
+    }
+  } else { // 向下滚动，缩小
+    scale -= 0.05;
+    if (scale < 0.5) {
+      scale = 0.5; // 最小缩小到0.5倍
+    }
+  }
+  
+  demo.style.transform = `scale(${scale})`;
+}
+    }
+  }
 };
 </script>
 <style lang="scss" scoped>