diff --git a/components/Photos/index.js b/components/Photos/index.js
index 1281ba0..99f1cd1 100644
--- a/components/Photos/index.js
+++ b/components/Photos/index.js
@@ -7,11 +7,11 @@ import { faAngleUp, faClose } from "@fortawesome/free-solid-svg-icons";
 import { useRouter } from "next/navigation";
 import baseRequest from "@/utils/baseRequest";
 import Player from "next-video/player";
-import dynamic from 'next/dynamic'
+// import dynamic from 'next/dynamic'
 // import ImagesMask from "@/components/ImagesMask";
-const ImagesMask = dynamic(() =>
-import('@/components/ImagesMask'), { ssr: false }
-)
+// const ImagesMask = dynamic(() =>
+// import('@/components/ImagesMask'), { ssr: false }
+// )
 export default function Photos({
   isUnlocked,
   mediaVisibleRange,
@@ -67,103 +67,104 @@ export default function Photos({
   }, [media]);
   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(() => {
+      console.log("bbbbbb")
+      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");
-    // btns.className = "imagesBtnsControllers";
-    // const btnL = document.createElement("div");
-    // btnL.className = "imagesBtnsControllerLeft";
-    // btnL.addEventListener("click", () => {
-    //   if (currentIndex.current > 0) {
-    //     currentIndex.current = currentIndex.current - 1;
-    //     handleShowImages(currentIndex.current, photos, btns,interval);
-    //     if (!currentIndex.current) {
-    //       btnL.style.opacity = 0.5;
-    //       btnR.style.opacity = 1;
-    //     } else {
-    //       btnR.style.opacity = 1;
-    //       btnL.style.opacity = 1;
-    //     }
-    //   }
-    // });
-    // const btnR = document.createElement("div");
-    // btnR.className = "imagesBtnsControllerRight";
-    // btnR.addEventListener("click", () => {
-    //   if (currentIndex.current < currentPhotos.length - 1) {
-    //     currentIndex.current = currentIndex.current + 1;
-    //     handleShowImages(currentIndex.current, photos, btns,interval);
-    //     if (currentIndex.current == currentPhotos.length - 1) {
-    //       btnR.style.opacity = 0.5;
-    //       btnL.style.opacity = 1;
-    //     } else {
-    //       btnR.style.opacity = 1;
-    //       btnL.style.opacity = 1;
-    //     }
-    //   }
-    // });
-    // btns.append(btnL, btnR);
-    // handleShowImages(index, photos, btns,interval);
+    const btns = document.createElement("div");
+    btns.className = "imagesBtnsControllers";
+    const btnL = document.createElement("div");
+    btnL.className = "imagesBtnsControllerLeft";
+    btnL.addEventListener("click", () => {
+      if (currentIndex.current > 0) {
+        currentIndex.current = currentIndex.current - 1;
+        handleShowImages(currentIndex.current, photos, btns,interval);
+        if (!currentIndex.current) {
+          btnL.style.opacity = 0.5;
+          btnR.style.opacity = 1;
+        } else {
+          btnR.style.opacity = 1;
+          btnL.style.opacity = 1;
+        }
+      }
+    });
+    const btnR = document.createElement("div");
+    btnR.className = "imagesBtnsControllerRight";
+    btnR.addEventListener("click", () => {
+      if (currentIndex.current < currentPhotos.length - 1) {
+        currentIndex.current = currentIndex.current + 1;
+        handleShowImages(currentIndex.current, photos, btns,interval);
+        if (currentIndex.current == currentPhotos.length - 1) {
+          btnR.style.opacity = 0.5;
+          btnL.style.opacity = 1;
+        } else {
+          btnR.style.opacity = 1;
+          btnL.style.opacity = 1;
+        }
+      }
+    });
+    btns.append(btnL, btnR);
+    handleShowImages(index, photos, btns,interval);
 
     // setVisible(true)
-    console.log(imagesMaskRef.current);
-    imagesMaskRef.current.show(
-      photos.map((item) => item?.url),
-      index
-    );
+    // console.log(imagesMaskRef.current);
+    // imagesMaskRef.current.show(
+    //   photos.map((item) => item?.url),
+    //   index
+    // );
   };
-  // const handleShowImages = (index, photos, btns) => {
-  //   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);
-  //   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, btns,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);
+    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);
-  //     },
-  //     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);
+      },
+      classNames: { body: "photos-bodyBox" },
+    });
+  };
   const handleShowVideo = (video) => {
     Dialog.className = "videoMask";
     Dialog.show({
@@ -362,7 +363,7 @@ export default function Photos({
           );
         })}
       </div>
-      <ImagesMask ref={imagesMaskRef} />
+      {/* <ImagesMask ref={imagesMaskRef} /> */}
       {/* <Viewer
       visible={visible}
       onClose={() => { setVisible(false); } }