From f8160ecd42bc899251e713f07d4dcb55efc0935b Mon Sep 17 00:00:00 2001
From: al <al@cdhncy.com>
Date: Wed, 7 Aug 2024 21:28:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/page.js                  |  1 +
 components/Photos/index.js   | 26 ++++++++++++++------------
 components/PostItem/index.js |  2 +-
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/app/page.js b/app/page.js
index 2296711..b07cc2f 100644
--- a/app/page.js
+++ b/app/page.js
@@ -139,6 +139,7 @@ const RecommPostList = forwardRef(({ scrollHeight }, ref) => {
     setHasMore(true);
   }
   async function loadMore() {
+    // debugger
     const list = await getRecommPostList(!commenPostList.length?2:0);
     if (list.length == 0) {
       setHasMore(false);
diff --git a/components/Photos/index.js b/components/Photos/index.js
index 1e644e3..49f8b34 100644
--- a/components/Photos/index.js
+++ b/components/Photos/index.js
@@ -210,13 +210,13 @@ export default function Photos({
     <>
       <div
         className={`grid ${
-          currentPhotos.length > 1 ? "grid-cols-3 gap-1.5" : "grid-cols-1"
+          currentPhotos.length > 1 ? "grid-cols-3 gap-1.5 min-h-[24vw]" : "grid-cols-1 min-h-[38vw]"
         }`}
       >
         {currentPhotos.map((item, index) => {
           return (
             <div
-              className="relative"
+              className="relative w-max"
               style={{ maxWidth: "calc(100vw - 72px)" }}
               key={index}
               onClick={() => {
@@ -241,27 +241,27 @@ export default function Photos({
             >
               {
                 <div
-                  className={`overflow-hidden rounded h-full max-h-80 ${
-                    currentPhotos.length > 1 ? "min-h-[24vw]" : "min-h-[38vw]"
+                  className={`overflow-hidden inline-block rounded h-full max-h-80 ${
+                    currentPhotos.length > 1 ? "min-h-[24vw]" : "max-h-[38vw]"
                   }`}
                 >
                   <Image
                     // lazy={true}
                     placeholder={
-                      <div className="w-full h-full bg-[#1d1d1d] rounded"></div>
+                      <div className="w-full h-full min-h-96 bg-[#1d1d1d] rounded"></div>
                     }
-                    width={currentPhotos.length > 1 ? "24vw" : "100%"}
-                    height={currentPhotos.length > 1 ? "24vw" : "auto"}
+                    width={currentPhotos.length > 1 ? "24vw" : "auto"}
+                    height={currentPhotos.length > 1 ? "24vw" : "38vw"}
                     className={`rounded max-w-full ${
                       item?.type == "hid" && type == "space" ? "imageBlur" : ""
                     }`}
-                    fit="cover"
+                    fit={currentPhotos.length > 1?"cover":"contain"}
                     src={item?.url}
                   />
                 </div>
               }
               {item?.mp4 && (
-                <div className="absolute top-0 w-full h-full rounded flex justify-center items-center bg-[#33333348]">
+                <div className="absolute top-0 w-full h-full rounded flex justify-center items-center">
                   <Image
                     className=""
                     width={98}
@@ -269,7 +269,9 @@ export default function Photos({
                     src={
                       process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/play.png"
                     }
-                    placeholder=""
+                    placeholder={
+                      <div className="w-full h-full min-h-96 bg-[#1d1d1d] rounded"></div>
+                    }
                   />
                 </div>
               )}
@@ -282,14 +284,14 @@ export default function Photos({
                 photos.length > 9 &&
                 (!seeAllPhotos ? (
                   <div
-                    className="absolute top-0 w-full h-full flex justify-center items-center bg-[#33333348]"
+                    className="absolute top-0  h-full flex justify-center items-center bg-[#33333348]"
                     onClick={handleSeeAllPhotos}
                   >
                     <span className="text-2xl">+{currentPhotos.length}</span>
                   </div>
                 ) : (
                   <div
-                    className="absolute top-0 w-full h-full flex justify-center items-center bg-[#33333348]"
+                    className="absolute top-0 h-full flex justify-center items-center bg-[#33333348]"
                     key="closeBtn"
                     onClick={handleSeeAllPhotos}
                   >
diff --git a/components/PostItem/index.js b/components/PostItem/index.js
index 499d2d5..f027b6d 100644
--- a/components/PostItem/index.js
+++ b/components/PostItem/index.js
@@ -163,7 +163,7 @@ export default function PostItem({
                 </div>
               )}
           </div>
-          <div className="mr-8 min-h-24 rounded-md">
+          <div className="mr-8 rounded-md">
             {data.media_component && (
               <Photos
                 data={data}