放大

src/views/item/preview.vue

@@ -236,7 +236,6 @@ import {
   getProductPreview
 } from '@/api/goods/index';
 
-
 const route = useRoute();
 const id = ref<any>(null);
 const dataInfo = ref<any>({});
@@ -276,7 +275,6 @@ const initData = () => {
   getInfoId();
 
   if (token) {
-    console.log('收藏');
     getCollection();
     // 浏览记录
     addProductBrowsingHistory(id.value).then((res) => {});
@@ -386,7 +384,6 @@ const onCart = () => {
   });
 };
 
-
 // 新增：放大功能相关
 const showZoom = ref(false);
 const mainImageRef = ref<HTMLImageElement | null>(null);
@@ -410,7 +407,7 @@ const handleMouseMove = (e: MouseEvent) => {
 
   // 遮罩层尺寸 (假设放大倍数为2，遮罩层大小为容器的一半，即正方形)
   // 如果希望遮罩层固定大小，可以写死，例如 200px
-  const maskSize = width / 2;
+  const maskSize = 200;
 
   // 计算遮罩层左上角的位置 (让鼠标位于遮罩层中心)
   let maskX = x - maskSize / 2;
@@ -532,7 +529,7 @@ const handleMouseMove = (e: MouseEvent) => {
           border-radius: 5px;
           overflow: hidden;
           position: relative; /* 关键：作为遮罩层的定位父级 */
-          cursor: crosshair; /* 关键：鼠标变成十字准星 */
+          cursor: move; /* 关键：鼠标变成十字准星 */
 
           @media (min-width: 1600px) {
             width: 860px;
@@ -548,10 +545,10 @@ const handleMouseMove = (e: MouseEvent) => {
           // 新增：遮罩层样式
           .zoom-mask {
             position: absolute;
-            width: 50%; /* 对应2倍放大，宽高各占50%形成正方形 */
-            height: 50%; /* 如果图片不是正方形，这里可能需要调整以保持正方形，但通常跟随容器比例即可 */
-            background-color: rgba(255, 255, 255, 0.3); /* 半透明白色 */
-            border: 1px solid #ccc; /* 边框 */
+            width: 200px; /* 容器宽度的一半 */
+            height: 200px; /* 容器高度的一半 */
+            // background-color: rgba(255, 255, 255, 0.3); /* 半透明白色 */
+            // border: 1px solid #ccc; /* 边框 */
             pointer-events: none; /* 关键：让鼠标事件穿透遮罩层，避免闪烁 */
             z-index: 5;
           }