gx

src/pages/A1home/components/index.module.scss

@@ -69,12 +69,12 @@
           width: 35%;
           opacity: 0;
           transition: all 0.6s ease-in-out 0.4s;
-          transform: translate(25%, -180px);
+          transform: translate(25%, -170px);
           object-fit: cover;
 
           &:hover {
             transition: none;
-            transform: translate(25%, -230px) perspective(500px)
+            transform: translate(25%, -170px) perspective(500px)
               translate3d(
                 calc((var(--mouse-x) * 0.03) * 1px),
                 calc((var(--mouse-y) * 0.03) * 1px),
@@ -159,7 +159,7 @@
         }
         .item1 {
           opacity: 1;
-          transform: translate(25%, -230px);
+          transform: translate(25%, -170px);
           transition: all 0.6s ease-in-out 0.4s;
         }
         .title2 {
@@ -279,12 +279,7 @@
 
             &:hover {
               transition: none;
-              transform: translate(-50%, 20px) perspective(500px)
-                translate3d(
-                  calc((var(--mouse-x) * 0.03) * 1px),
-                  calc((var(--mouse-y) * 0.03) * 1px),
-                  0
-                );
+              transform: translate(-50%, 0);
             }
           }
 
@@ -303,12 +298,7 @@
 
             &:hover {
               transition: none;
-              transform: translate(-50%, 200px) perspective(500px)
-                translate3d(
-                  calc((var(--mouse-x) * 0.03) * 1px),
-                  calc((var(--mouse-y) * 0.03) * 1px),
-                  0
-                );
+              transform: translate(-50%, 170px);
             }
           }
 
@@ -318,12 +308,7 @@
             transform: translate(-50%, -20px);
             &:hover {
               transition: none;
-              transform: translate(-50%, -20px) perspective(500px)
-                translate3d(
-                  calc((var(--mouse-x) * 0.03) * 1px),
-                  calc((var(--mouse-y) * 0.03) * 1px),
-                  0
-                );
+              transform: translate(-30%, 0px);
             }
           }
 
@@ -332,12 +317,7 @@
             transform: translate(-50%, 20px);
             &:hover {
               transition: none;
-              transform: translate(-50%, 20px) perspective(500px)
-                translate3d(
-                  calc((var(--mouse-x) * 0.03) * 1px),
-                  calc((var(--mouse-y) * 0.03) * 1px),
-                  0
-                );
+              transform: translate(-50%, 0px);
             }
           }
         }

src/pages/A1home/index.tsx

@@ -11,6 +11,7 @@ function A1home({ show, setShow }: { show: boolean; setShow: (show: boolean) =>
     sliderRef.current?.slickNext()
   }
 
+  // 图片 hover 事件
   const handleMouseMove = (e: React.MouseEvent<HTMLImageElement>) => {
     const rect = e.currentTarget.getBoundingClientRect()
     const x = e.clientX - rect.left