处理样式

app/globals.css

@@ -283,9 +283,13 @@ footer{
   width: max-content;
   border-radius: 0.25rem;
 } */
+.mediaDom .adm-image-viewer-slides-inner{
+  padding-top: 68px;
+}
 .mediaDom .adm-image-viewer-slide{
-  /* max-height: 90vh; */
-  max-width: 100vw;
+  max-height: calc(100vh - 100px);
+  width: 100vw;
+
 }
 .photos-body img{
   /* max-height: 90vh; */
@@ -303,8 +307,13 @@ footer{
   border-radius: 0.25rem;
 }
 
+.photos-bodyBox-full{
+  width: 100vw;
+  max-height: calc(100vh);
+}
 .photos-bodyBox{
   width: 100vw;
+  max-height: calc(100vh - 120px);
 }
 
 .adm-checkbox.adm-checkbox-checked .adm-checkbox-icon {

app/layout.js

@@ -84,7 +84,7 @@ export default function RootLayout({ children }) {
         <meta name="apple-mobile-web-app-capable" content="yes" />
         {/* <!-- 用来定义顶部状态栏的形式默认是default为白色 black为黑色 black-translucent为灰色半透明（会占据屏幕的约20px，不同的设备可能会有差异）--> */}
         {/* <!-- 在定义了apple-mobile-web-app-capable的前提下，设置状态栏的属性值apple-mobile-web-app-status-bar-style才有效； --> */}
-        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
         {/* <!-- apple-touch-startup-image用来配置启动动画 --> */}
         {/* <!-- 这里要注意，这里图片的尺寸要和设备的静态图片显示尺寸完全对应，差一个像素都会导致启动动画无法显示 --> */}
         {/* <!-- 下面列举了iPhone的所有尺寸（ps:为了方便大家就全部贴出来了！！） --> */}

components/Photos/index.js

@@ -71,6 +71,15 @@ export default function Photos({
       setCurrentPhotos(newPhotos);
     }
   }, [media]);
+  useEffect(()=>{
+    // window.addEventListener('resize', (e)=>{
+    //   // alert(window.innerHeight)
+    //   setMaskHeight(window.innerHeight)
+    // });
+    return ()=>{
+      // window.removeEventListener("resize")
+    }
+  },[])
   const showPhotos = (photos, index) => {
     currentIndex.current = index;
     const interval = setInterval(() => {
@@ -135,6 +144,7 @@ export default function Photos({
       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),
@@ -167,6 +177,7 @@ export default function Photos({
       afterClose: () => {
         mediaDom.remove();
         clearInterval(interval);
+        document.body.style.overflow = 'auto';
       },
       classNames: { body: "photos-bodyBox" },
     });

utils/tools/handleFuns.js

@@ -66,7 +66,7 @@ export const handleShowVideo = (video) => {
               <FontAwesomeIcon icon={faClose} size="2xl" />
             </div>
           </div>
-          <div className="my-4 pointer-events-auto">
+          <div className="my-2 pointer-events-auto">
             {/* <video
             width="100%"
             height="100%"
@@ -85,7 +85,7 @@ export const handleShowVideo = (video) => {
               poster={video?.url.src}
               blurDataURL={video?.url.blurDataURL}
               autoPlay={true}
-              style={{ height: "calc(100vh - 250px)" }}
+              style={{ height: "calc(100vh - 180px)" }}
             />
             {/* <Player
             src="https://www.mydomain.com/remote-video.mp4"