diff --git a/app/globals.css b/app/globals.css
index 102cd03..3afdcf4 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -245,7 +245,7 @@ footer{
 .adm-floating-panel .adm-floating-panel-content {
   flex: 1;
   overflow-y: scroll;
-  background: rgb(7 5 10/ var(--tw-bg-opacity));
+  background: rgb(7 5 10/ var(--tw-bg-opacity))!important;
 }
 
 .adm-list>div>div>div>div{
diff --git a/components/ImagesMask/index.jsx b/components/ImagesMask/index.jsx
index e12354a..7c99016 100644
--- a/components/ImagesMask/index.jsx
+++ b/components/ImagesMask/index.jsx
@@ -11,45 +11,44 @@ import { Mask, Image } from "antd-mobile";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";
 import { createRoot } from "react-dom/client";
-
+import { useRouter } from "next/navigation";
+import baseRequest from "@/utils/baseRequest";
 const root = createRoot(document?.getElementById("maskDomBox"));
 function ImagesMask({}, ref) {
-  const [currentIndex, setCurrentIndex] = useState(0);
   const [visible, setVisible] = useState(false);
   const [images, setImages] = useState([]);
+  const [data, setData] = useState(null);
   const scrollRef = useRef(null);
+  const defaultIndex = useRef(null);
+  const router = useRouter();
   useEffect(() => {
     root.render(
       <div>
         <ImagesMaskContaint
           images={images}
           visible={visible}
-          currentIndex={currentIndex}
           ref={scrollRef}
-          setCurrentIndex={setCurrentIndex}
           setVisible={setVisible}
           setImages={setImages}
+          router={router}
+          data={data}
+          defaultIndex={defaultIndex.current}
         />
       </div>
     );
     // root.render(<div>xxxx</div>);
   }, [visible]);
-  useEffect(() => {
-    if (scrollRef.current) {
-      setTimeout(() => {
-        scrollRef.current.scrollLeft = 414 * currentIndex;
-      }, 200);
-    }
-  }, [currentIndex]);
+
   useImperativeHandle(ref, () => ({
-    show: (arr, index) => {
-      setCurrentIndex(index);
+    show: (arr, index, data) => {
+      defaultIndex.current = index;
       setImages(arr);
-      setVisible(old=>{
-        console.log(arr, index,old)
-        return !old
+      setData(data);
+      setVisible((old) => {
+        console.log(arr, index, old);
+        return !old;
       });
-      
+
       // Mask.show
       // const maskDomBox = document.getElementById("maskDomBox");
     },
@@ -60,73 +59,192 @@ function ImagesMask({}, ref) {
 }
 
 const ImagesMaskContaint = forwardRef(
-  ({ visible, images, currentIndex,setCurrentIndex,setVisible,setImages }, ref) => {
+  (
+    { visible, images, setVisible, setImages, router, data, defaultIndex = 0 },
+    ref
+  ) => {
+    const [currentIndex, setCurrentIndex] = useState(0);
     const [distance, setDistance] = useState(0);
+    const [direction, setDirection] = useState("left");
+    const [initialX, setInitialX] = useState(0);
+    const [currentX, setCurrentX] = useState(0);
+    const [xOffset, setXOffset] = useState(0);
+    const [active, setActive] = useState(false);
+    const base = baseRequest();
     const getDistance = (e) => {
       e.stopPropagation();
       const distance = ref.current.scrollLeft;
       setDistance(distance);
     };
-    const handleMoveImages = (e, index) => {
-      e.stopPropagation();
-      // console.log("distance",distance)
-      if (
-        distance > window.innerWidth * currentIndex &&
-        distance < window.innerWidth + window.innerWidth * currentIndex
-      ) {
-        setCurrentIndex(Math.ceil(distance / 414));
-      } else if (distance < window.innerWidth * currentIndex) {
-        setCurrentIndex(Math.ceil(distance / 414) - 1);
+    useEffect(() => {
+      setCurrentIndex(defaultIndex);
+      setTimeout(() => {
+        // console.log("ref.current", ref.current);
+        if (ref.current) {
+          ref.current.style.transform = `translateX(${
+            -window.innerWidth * defaultIndex
+          }px)`;
+        }
+      }, 100);
+    }, [defaultIndex]);
+    useEffect(() => {
+      console.log("ref.current", ref.current);
+      if (ref.current) {
+        ref.current.style.transform = `translateX(${
+          -window.innerWidth * currentIndex
+        }px)`;
       }
+    }, [currentIndex]);
+    const test1 = (e) => {
+      console.log(
+        e.touches[0].clientX - (!currentIndex ? 0 : xOffset),
+        e.touches[0].clientX,
+        xOffset
+      );
+      setInitialX(e.touches[0].clientX - (!currentIndex ? 0 : xOffset));
+      if (e.touches.length === 1) {
+        // 单点触摸
+        setActive(true);
+      }
+    };
+    const test2 = (e) => {
+      if (active) {
+        // e.preventDefault();
+        let X =
+          e.touches[0].clientX -
+          window.innerWidth * (currentIndex ? 1 : currentIndex + 1);
+        console.log("-----", e.touches[0].clientX, initialX, currentIndex);
+        setCurrentX((old) => {
+          setDirection(X > old ? "right" : "left");
+          return X;
+        });
+        setXOffset(X);
+        ref.current.style.transform = "translateX(" + X + "px)";
+      }
+    };
+    const test3 = (index) => {
+      console.log("index", index);
+      // setInitialX(currentX);
+      setActive(false);
+      let cxOffset = window.innerWidth;
+      console.log(direction, index, images.length - 1);
+      if (direction == "left") {
+        if (index < images.length - 1) {
+          setCurrentIndex(index + 1);
+          console.log(index + 1);
+        } else {
+          ref.current.style.transform = `translateX(${-cxOffset * index}px)`;
+        }
+      } else {
+        if (index > 0) {
+          setCurrentIndex(index - 1);
+          console.log(index - 1);
+        } else {
+          ref.current.style.transform = `translateX(${-cxOffset * index}px)`;
+        }
+      }
+      setInitialX(currentX);
+      // setInitialX(-cxOffset * (index + 1));
+      setXOffset(-cxOffset * (index || 1));
     };
     return (
       <div>
         <Mask
-        visible={visible}
-        className="z-[1002] h-screen flex justify-center items-center"
-      >
-        <div className="relative">
-          <div className="text-center mb-2">
-            {currentIndex + 1}/{images.length}
-          </div>
-          <div ref={ref} id="imagesScrollBox" className="flex overflow-auto scrollbarBoxX">
-            {images.map((item, index) => {
-              return (
-                <img
-                  key={index}
-                  src={item}
-                  // onTouchMove={(e) => handleMoveImages(e, index)}
-                  onTouchMove={getDistance}
-                  onTouchEnd={(e) => handleMoveImages(e, index)}
-                  onClick={() => {
-                    setVisible(false), setImages([]), setCurrentIndex(0);
-                  }}
-                />
-              );
-            })}
-          </div>
-          <div className="flex justify-between items-center w-screen absolute top-1/2 px-4 pointer-events-none">
-            <div
-              className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full float-left pointer-events-auto"
-              onClick={() => {
-                setCurrentIndex((old) => (old > 0 ? old - 1 : old));
-              }}
-            >
-              <FontAwesomeIcon icon={faAngleLeft} size="xl" />
+          visible={visible}
+          className="z-[1002] h-screen flex justify-center items-center"
+          onMaskClick={() => {
+            setVisible(false), setImages([]), setCurrentIndex(0);
+            // root.unmount();
+          }}
+        >
+          <div className="relative">
+            <div className="text-center mb-2 leading-[54px]">
+              {currentIndex + 1}/{images.length}
             </div>
             <div
-              className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full float-left pointer-events-auto"
+              className="flex justify-start items-center"
+              style={{ height: "calc(100vh - 174px)" }}
               onClick={() => {
-                setCurrentIndex((old) =>
-                  old < images.length - 1 ? old + 1 : old
-                );
+                setVisible(false), setImages([]), setCurrentIndex(0);
+                // root.unmount();
               }}
             >
-              <FontAwesomeIcon icon={faAngleRight} size="xl" />
+              <div
+                ref={ref}
+                id="imagesScrollBox"
+                className="flex justify-center items-center"
+                draggable={true}
+                // onTouchStart={test1}
+                // onTouchMove={test2}
+                // onTouchEnd={() => test3(currentIndex)}
+              >
+                {images.map((item, index) => {
+                  return (
+                    <div key={index} className="flex-none w-screen relative">
+                      <img
+                        src={item.url}
+                        style={{
+                          filter: item.type == "hid" ? "blur(10px)" : "none",
+                        }}
+                      />
+                      <div className="absolute top-1/2 left-1/2 -ml-[100px] -mt-[14px]">
+                        {item.type == "hid" && (
+                          <div className="flex justify-center">
+                            <div
+                              className="rounded-full text-sm h-max w-max px-4 py-1 bg-primary"
+                              onClick={() => {
+                                router.push(
+                                  "/webView/" +
+                                    encodeURIComponent(
+                                      "/zone/pay/" +
+                                        data?.zid +
+                                        "/h5_zone_moment/" +
+                                        data?.id +
+                                        "?base=" +
+                                        encodeURIComponent(JSON.stringify(base))
+                                    )
+                                );
+                              }}
+                            >
+                              此内容暂未解锁，立即解锁
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+            <div
+              className="flex justify-between items-center w-screen absolute top-1/2 px-4 pointer-events-none"
+              style={{
+                marginTop: "calc(-50vh + 118px)",
+                height: "calc(100vh - 174px)",
+              }}
+            >
+              <div
+                className="w-12 h-full flex items-center justify-center  rounded-full float-left pointer-events-auto"
+                onClick={() => {
+                  setCurrentIndex((old) => (old > 0 ? old - 1 : old));
+                }}
+              >
+                <FontAwesomeIcon icon={faAngleLeft} size="xl" />
+              </div>
+              <div
+                className="w-12 h-full flex items-center justify-center  rounded-full float-left pointer-events-auto"
+                onClick={() => {
+                  setCurrentIndex((old) =>
+                    old < images.length - 1 ? old + 1 : old
+                  );
+                  setInitialX((currentIndex || 1) * window.innerWidth * 2);
+                }}
+              >
+                <FontAwesomeIcon icon={faAngleRight} size="xl" />
+              </div>
             </div>
           </div>
-        </div>
-      </Mask>
+        </Mask>
       </div>
     );
   }
diff --git a/components/Photos/index.js b/components/Photos/index.js
index 9e5f922..a696323 100644
--- a/components/Photos/index.js
+++ b/components/Photos/index.js
@@ -8,7 +8,7 @@ import { useRouter } from "next/navigation";
 import baseRequest from "@/utils/baseRequest";
 import { handleShowVideo } from "@/utils/tools/handleFuns";
 // import dynamic from 'next/dynamic'
-// import ImagesMask from "@/components/ImagesMask";
+import ImagesMask from "@/components/ImagesMask";
 // const ImagesMask = dynamic(() =>
 // import('@/components/ImagesMask'), { ssr: false }
 // )
@@ -84,15 +84,15 @@ export default function Photos({
   }, []);
   const showPhotos = (photos, index) => {
     currentIndex.current = index;
-    const interval = setInterval(() => {
-      const bodyBox = document.getElementsByClassName("photos-bodyBox")[0];
-      if (bodyBox) {
-        bodyBox.firstChild.lastChild.style.transform = `translateX(-${
-          currentIndex.current * (window.innerWidth + 16)
-        }px)`;
-        // console.log(bodyBox.firstChild.lastChild.style.transform);
-      }
-    }, 400);
+    // const interval = setInterval(() => {
+    //   const bodyBox = document.getElementsByClassName("photos-bodyBox")[0];
+    //   if (bodyBox) {
+    //     bodyBox.firstChild.lastChild.style.transform = `translateX(-${
+    //       currentIndex.current * (window.innerWidth + 16)
+    //     }px)`;
+    //     // console.log(bodyBox.firstChild.lastChild.style.transform);
+    //   }
+    // }, 400);
 
     // 添加左右切换按钮
     // const btns = document.createElement("div");
@@ -129,65 +129,62 @@ export default function Photos({
     // });
     // btns.append(btnL, btnR);
     // handleShowImages(index, photos, btns,interval);
-    handleShowImages(index, photos, interval);
+    // handleShowImages(index, photos, interval);
 
     // setVisible(true)
-    // console.log(imagesMaskRef.current);
-    // imagesMaskRef.current.show(
-    //   photos.map((item) => item?.url),
-    //   index
-    // );
+    console.log(imagesMaskRef.current, photos);
+    imagesMaskRef.current.show(photos, index, data);
   };
-  const handleShowImages = (index, photos, interval) => {
-    const mediaDom = document.createElement("div");
-    mediaDom.style.width = "100vw";
-    document.body.appendChild(mediaDom);
-    mediaDom.className = `${
-      photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
-    }`;
-    // mediaDom.appendChild(btns);
-    document.body.style.overflow = "hidden";
-    ImageViewer.clear();
-    ImageViewer.Multi.show({
-      images: photos.map((item) => item?.url),
-      defaultIndex: index,
-      renderFooter: (image, index) => {
-        return renderFooter(photos[index]?.type == "hid", mediaDom);
-      },
+  // const handleShowImages = (index, photos, interval) => {
+  //   const mediaDom = document.createElement("div");
+  //   mediaDom.style.width = "100vw";
+  //   document.body.appendChild(mediaDom);
+  //   mediaDom.className = `${
+  //     photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
+  //   }`;
+  //   // mediaDom.appendChild(btns);
+  //   document.body.style.overflow = "hidden";
+  //   ImageViewer.clear();
+  //   ImageViewer.Multi.show({
+  //     images: photos.map((item) => item?.url),
+  //     defaultIndex: index,
+  //     renderFooter: (image, index) => {
+  //       return renderFooter(photos[index]?.type == "hid", mediaDom);
+  //     },
 
-      getContainer: mediaDom,
-      onIndexChange: (index) => {
-        currentIndex.current = index;
-        mediaDom.className = `${
-          photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
-        }`;
-        const leftBtn = document.getElementsByClassName(
-          "imagesBtnsControllerLeft"
-        )[0];
-        const rightBtn = document.getElementsByClassName(
-          "imagesBtnsControllerRight"
-        )[0];
-        if (leftBtn && rightBtn) {
-          if (!index) {
-            leftBtn.style.opacity = 0.5;
-            rightBtn.style.opacity = 1;
-          } else if (index == currentPhotos.length - 1) {
-            leftBtn.style.opacity = 1;
-            rightBtn.style.opacity = 0.5;
-          } else {
-            leftBtn.style.opacity = 1;
-            rightBtn.style.opacity = 1;
-          }
-        }
-      },
-      afterClose: () => {
-        mediaDom.remove();
-        clearInterval(interval);
-        document.body.style.overflow = "auto";
-      },
-      classNames: { body: "photos-bodyBox" },
-    });
-  };
+  //     getContainer: mediaDom,
+  //     onIndexChange: (index) => {
+  //       currentIndex.current = index;
+  //       mediaDom.className = `${
+  //         photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
+  //       }`;
+  //       const leftBtn = document.getElementsByClassName(
+  //         "imagesBtnsControllerLeft"
+  //       )[0];
+  //       const rightBtn = document.getElementsByClassName(
+  //         "imagesBtnsControllerRight"
+  //       )[0];
+  //       if (leftBtn && rightBtn) {
+  //         if (!index) {
+  //           leftBtn.style.opacity = 0.5;
+  //           rightBtn.style.opacity = 1;
+  //         } else if (index == currentPhotos.length - 1) {
+  //           leftBtn.style.opacity = 1;
+  //           rightBtn.style.opacity = 0.5;
+  //         } else {
+  //           leftBtn.style.opacity = 1;
+  //           rightBtn.style.opacity = 1;
+  //         }
+  //       }
+  //     },
+  //     afterClose: () => {
+  //       mediaDom.remove();
+  //       clearInterval(interval);
+  //       document.body.style.overflow = "auto";
+  //     },
+  //     classNames: { body: "photos-bodyBox" },
+  //   });
+  // };
   const handleSeeAllPhotos = (e) => {
     e.stopPropagation();
     e.preventDefault();
@@ -343,7 +340,7 @@ export default function Photos({
           );
         })}
       </div>
-      {/* <ImagesMask ref={imagesMaskRef} /> */}
+      <ImagesMask ref={imagesMaskRef} />
       {/* <Viewer
       visible={visible}
       onClose={() => { setVisible(false); } }