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

70
components/PostItem/index.js
View File

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