修改样式
This commit is contained in:
parent
e568325a41
commit
f8160ecd42
|
@ -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);
|
||||||
|
|
|
@ -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}
|
||||||
>
|
>
|
||||||
|
|
|
@ -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}
|
||||||
|
|
Loading…
Reference in New Issue