修改样式

This commit is contained in:
al 2024-08-07 21:28:17 +08:00
parent e568325a41
commit f8160ecd42
3 changed files with 16 additions and 13 deletions

View File

@ -139,6 +139,7 @@ const RecommPostList = forwardRef(({ scrollHeight }, ref) => {
setHasMore(true); setHasMore(true);
} }
async function loadMore() { async function loadMore() {
// debugger
const list = await getRecommPostList(!commenPostList.length?2:0); const list = await getRecommPostList(!commenPostList.length?2:0);
if (list.length == 0) { if (list.length == 0) {
setHasMore(false); setHasMore(false);

View File

@ -210,13 +210,13 @@ export default function Photos({
<> <>
<div <div
className={`grid ${ 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) => { {currentPhotos.map((item, index) => {
return ( return (
<div <div
className="relative" className="relative w-max"
style={{ maxWidth: "calc(100vw - 72px)" }} style={{ maxWidth: "calc(100vw - 72px)" }}
key={index} key={index}
onClick={() => { onClick={() => {
@ -241,27 +241,27 @@ export default function Photos({
> >
{ {
<div <div
className={`overflow-hidden rounded h-full max-h-80 ${ className={`overflow-hidden inline-block rounded h-full max-h-80 ${
currentPhotos.length > 1 ? "min-h-[24vw]" : "min-h-[38vw]" currentPhotos.length > 1 ? "min-h-[24vw]" : "max-h-[38vw]"
}`} }`}
> >
<Image <Image
// lazy={true} // lazy={true}
placeholder={ 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%"} width={currentPhotos.length > 1 ? "24vw" : "auto"}
height={currentPhotos.length > 1 ? "24vw" : "auto"} height={currentPhotos.length > 1 ? "24vw" : "38vw"}
className={`rounded max-w-full ${ className={`rounded max-w-full ${
item?.type == "hid" && type == "space" ? "imageBlur" : "" item?.type == "hid" && type == "space" ? "imageBlur" : ""
}`} }`}
fit="cover" fit={currentPhotos.length > 1?"cover":"contain"}
src={item?.url} src={item?.url}
/> />
</div> </div>
} }
{item?.mp4 && ( {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 <Image
className="" className=""
width={98} width={98}
@ -269,7 +269,9 @@ export default function Photos({
src={ src={
process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/play.png" 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> </div>
)} )}
@ -282,14 +284,14 @@ export default function Photos({
photos.length > 9 && photos.length > 9 &&
(!seeAllPhotos ? ( (!seeAllPhotos ? (
<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]"
onClick={handleSeeAllPhotos} onClick={handleSeeAllPhotos}
> >
<span className="text-2xl">+{currentPhotos.length}</span> <span className="text-2xl">+{currentPhotos.length}</span>
</div> </div>
) : ( ) : (
<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" key="closeBtn"
onClick={handleSeeAllPhotos} onClick={handleSeeAllPhotos}
> >

View File

@ -163,7 +163,7 @@ export default function PostItem({
</div> </div>
)} )}
</div> </div>
<div className="mr-8 min-h-24 rounded-md"> <div className="mr-8 rounded-md">
{data.media_component && ( {data.media_component && (
<Photos <Photos
data={data} data={data}