wishpal_ironfan
/
tiefen_space_h5
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

处理图片比例

This commit is contained in:
al 2024-08-09 22:10:02 +08:00
parent c23977cf1e
commit 650daaaa89
2 changed files with 46 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/Photos/index.js
View File

@ -35,13 +35,17 @@ export default function Photos({
let imgArr = media.images.map((item) => ({
type: "img",
url: item.urls?.[0],
fullwidth:item.w>item.h
// fullwidth:item.w>item.h，
w:item.w,
h:item.h,
}));
let videoArr = media.videos.map((item) => ({
type: "video",
url: item.cover_urls?.[0],
mp4: item.urls?.[0],
fullwidth:item.cover_w>item.cover_h
w:item.cover_w,
h:item.cover_h,
// fullwidth:item.cover_w>item.cover_h
}));
let arr = [...imgArr, ...videoArr];
let newPhotos = [...arr];
@ -217,8 +221,8 @@ export default function Photos({
{currentPhotos.map((item, index) => {
return (
<div
className={`relative w-max ${currentPhotos.length > 1 ? "h-[24vw]" : ""} `}
style={{ maxWidth: "calc(100vw - 72px)" }}
className={`relative`}
// style={{ width: }}
key={index}
onClick={() => {
if (item?.type == "video") {
@ -242,8 +246,8 @@ export default function Photos({
>
{
<div
className={`overflow-hidden inline-block rounded h-full max-h-80 ${
currentPhotos.length > 1 ? "h-[24vw]" : "auto"
className={`overflow-hidden rounded h-full ${
currentPhotos.length > 1 ? "h-[24vw]" : ""
}`}
>
<Image
@ -251,8 +255,8 @@ export default function Photos({
placeholder={
<div className="w-full min-h-[24vw] bg-[#1d1d1d] rounded"></div>
}
width={currentPhotos.length > 1 ? "24vw" : item.fullwidth?"100%":"46vw"}
height={currentPhotos.length > 1 ? "24vw" : "100%"}
width={currentPhotos.length > 1 ? "24vw" : item.w>item.h?`calc(100vw - 72px - 2rem)`:`calc(46vw * ${item.w/item.h})`}
height={currentPhotos.length > 1 ? "24vw" : item.w>item.h? `calc((100vw - 72px - 2rem) * ${item.h/item.w})`:"46vw"}
className={`rounded max-w-full ${
item?.type == "hid" && type == "space" ? "imageBlur" : ""
}`}

70
components/PostItem/index.js
View File

@ -1,6 +1,6 @@
"use client";
import React, { useEffect, useState, useMemo,useCallback } from "react";
import React, { useEffect, useState, useMemo, useCallback } from "react";
import Photos from "../Photos";
import { useRouter } from "next/navigation";
import PaySpacePost from "../PaySpacePost";
@ -78,7 +78,6 @@ export default function PostItem({
src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/images/top_post.png"}
width={76}
className="mb-2"
/>
)}
<div className="flex">
@ -113,42 +112,40 @@ export default function PostItem({
)}
{data?.status === 3 && (
<p className="py-1 px-2 inline-block bg-[#F53030] rounded">
<span className="text-white text-sm">审核未通过，请前往APP编辑。</span>
<span className="text-white text-sm">
审核未通过，请前往APP编辑。
</span>
</p>
)}
<div>
{!data?.is_zone_moment_unlocked ? (
<span>
<div
dangerouslySetInnerHTML={{
__html: findLinksInText(data.text),
}}
<span
dangerouslySetInnerHTML={{
__html: findLinksInText(data.text),
}}
className={`mb-2 mt-2 whitespace-pre-wrap ${
!isOpenText ? "text-ellipsis-7" : ""
} ${inter.className}`}
// style={{
// WebkitLineClamp: data?.text_visible_range < 999?data?.text_visible_range:7,
// }}
></span>
) : (
<div>
<span
className={`mb-2 mt-2 whitespace-pre-wrap ${
!isOpenText ? "text-ellipsis-7" : ""
} ${inter.className}`}
// style={{
// WebkitLineClamp: data?.text_visible_range < 999?data?.text_visible_range:7,
// }}
></div>
</span>
) : (
<div>
<span>
<div
className={`mb-2 mt-2 whitespace-pre-wrap ${
!isOpenText ? "text-ellipsis-7" : ""
} ${inter.className}`}
dangerouslySetInnerHTML={{
__html: findLinksInText(data.text),
}}
style={{
WebkitLineClamp:
data?.text_visible_range < 999
? data?.text_visible_range
: 7,
}}
></div>
</span>
dangerouslySetInnerHTML={{
__html: findLinksInText(data.text),
}}
style={{
WebkitLineClamp:
data?.text_visible_range < 999
? data?.text_visible_range
: 7,
}}
></span>
</div>
)}
{!(
@ -219,11 +216,12 @@ export default function PostItem({
"天前"
}有更新`}
空间 */}
空间{formatZoneUpdateTime(
data?.streamer_ext
?.days_elapsed_since_the_last_zones_update
)}
有更新
空间
{formatZoneUpdateTime(
data?.streamer_ext
?.days_elapsed_since_the_last_zones_update
)}
有更新
</span>
<FontAwesomeIcon
icon={faAngleRight}