src/views/page/largeScreen.vue

@@ -2218,15 +2218,15 @@ export default {
           left: 0;
           z-index: 99;
           -webkit-mask-image: linear-gradient(90deg,
-              transparent 22%,
+              transparent 0%,
               transparent 10%,
-              blue 30%,
+              blue 20%,
-              blue 70%,
+              blue 80%,
-              transparent 75%,
+              transparent 90%,
               transparent 100%);
 
           .map1 {
-            width: 70%;
+            width: 90%;
             height:90%;
             // background: url('../assets/img/map.png') center no-repeat;
             // background-size: 100% 100%;
@@ -2238,7 +2238,7 @@ export default {
             //     transparent 100%);
             -webkit-mask-image: linear-gradient(transparent 0%,
                 blue 8%,
-                blue 85%,
+                blue 92%,
                 transparent 100%);
             // transform: scale(0.6);
             position: absolute;

src/views/page/largeScreen1.vue

@@ -1406,7 +1406,7 @@ demo.onwheel = function(e) {
     }
   }
   
-  demo.style.transform = `scale(${scale})`;
+  demo.style.transform = `translate(-50%,-50%) scale(${scale})`;
 }
     }
   }
@@ -1574,7 +1574,7 @@ demo.onwheel = function(e) {
           // background-size: 100% 100%;
           -webkit-mask-image: linear-gradient(transparent 4%,
               blue 15%,
-              blue 86%,
+              blue 96%,
               transparent 100%);
           overflow: hidden;
           position: absolute;
@@ -1583,6 +1583,9 @@ demo.onwheel = function(e) {
             width: 100%;
             height: 100%;
             position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%,-50%);
             -webkit-mask-image: linear-gradient(90deg,
                 transparent 0%,
                 blue 5%,
@@ -1593,9 +1596,9 @@ demo.onwheel = function(e) {
               width: 100%;
               height: 100%;
               -webkit-mask-image: linear-gradient(transparent 0%,
-                  blue 13%,
+                  blue 4%,
-                  blue 73%,
+                  blue 96%,
-                  transparent 97%);
+                  transparent 100%);
             }
 
             .pole_item,
@@ -1805,19 +1808,22 @@ demo.onwheel = function(e) {
             width: 100%;
             height: 100%;
                  position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%,-50%);
             -webkit-mask-image: linear-gradient(90deg,
-                transparent 4%,
+                transparent 0%,
-                blue 18%,
+                blue 4%,
-                blue 88%,
+                blue 96%,
                 transparent 100%);
 
             .drag_img {
               width: 100%;
               height: 100%;
               -webkit-mask-image: linear-gradient(transparent 0%,
-                  blue 13%,
+                  blue 4%,
-                  blue 73%,
+                  blue 96%,
-                  transparent 97%);
+                  transparent 100%);
             }
 
             .pole_item_4 {
@@ -2068,16 +2074,19 @@ demo.onwheel = function(e) {
           .drag_box12,
           .drag_box13 {
             width: 100%;
+     
             height:auto;
             position: absolute;
-            top: -95px;
+          left: 50%;
-            // -webkit-mask-image: linear-gradient(
+          top: 50%;
-            //  90deg,
+          transform: translate(-50%,-50%);
-            //   transparent 0%,
+            -webkit-mask-image: linear-gradient(
-            //   blue 2%,
+             90deg,
-            //   blue 97%,
+              transparent 0%,
-            //   transparent 99%
+              blue 2%,
-            //  );
+              blue 97%,
+              transparent 100%
+             );
            
             .drag_img {
               width: 100%;
@@ -2296,19 +2305,23 @@ demo.onwheel = function(e) {
             width: 100%;
             height: 100%;
             position: absolute;
+            
+          left: 50%;
+          transform: translate(-50%,-50%);
+          top: 50%;
             -webkit-mask-image: linear-gradient(90deg,
                 transparent 0%,
                 blue 5%,
                 blue 93%,
-                transparent 99%);
+                transparent 100%);
 
             .drag_img {
               width: 100%;
               height: 100%;
               -webkit-mask-image: linear-gradient(transparent 0%,
-                  blue 13%,
+                  blue 4%,
-                  blue 73%,
+                  blue 96%,
-                  transparent 97%);
+                  transparent 100%);
             }
 
             .pole_item {