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-07-22 19:43:20 +08:00
parent 539be2b06a
commit 8983e84cf9
6 changed files with 36 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api/public.js
View File

@ -18,8 +18,6 @@ export const handleLogout = async () => {
position: "top", position: "top",
}); });
return; return;
} else {
console.error(error);
} }
} catch (error) { } catch (error) {
console.error(error); console.error(error);

6
app/layout.js
View File

@ -33,13 +33,13 @@ export const viewport = {
}; };
export default function RootLayout({ children }) { export default function RootLayout({ children }) {
return ( return (
<html lang="zh-CN" className="bg-deepBg" data-prefers-color-scheme="dark"> <html lang="zh-CN" className="bg-deepBg h-full" data-prefers-color-scheme="dark">
<Head> <Head>
<title>{metadata.title}</title> <title>{metadata.title}</title>
<meta name="description" content={metadata.description} keywords={metadata.keywords}/> <meta name="description" content={metadata.description} keywords={metadata.keywords}/>
</Head> </Head>
<body className={inter.className}> <body className={`${inter.className } h-full`}>
<main className={`w-full bg-deepBg `}> <main className={`w-full bg-deepBg h-full`}>
{withAuth(<Provider store={store}>{children}</Provider>)} {withAuth(<Provider store={store}>{children}</Provider>)}
{/* <Provider store={store}>{children}</Provider> */} {/* <Provider store={store}>{children}</Provider> */}
</main> </main>

6
app/login/page.js
View File

@ -197,11 +197,12 @@ function Login({ handleLogin }) {
} }
}; };
return ( return (
<div className={`${styles.loginBox}`}> <div className="h-full flex justify-center items-center">
<div className={`lg:max-w-[450px] overflow-hidden`}>
<Image <Image
src={process.env.NEXT_PUBLIC_CDN_URL + "/public/images/slogan.png"} src={process.env.NEXT_PUBLIC_CDN_URL + "/public/images/slogan.png"}
alt="" alt=""
className="mt-24 w-[90vw]" className="w-full"
/> />
<div className="mt-6 flex justify-between items-center px-2 text-[#ffffff80] sticky top-0 z-10 bg-deepBg"> <div className="mt-6 flex justify-between items-center px-2 text-[#ffffff80] sticky top-0 z-10 bg-deepBg">
<Tabs <Tabs
@ -342,6 +343,7 @@ function Login({ handleLogin }) {
</Swiper.Item> </Swiper.Item>
</Swiper> </Swiper>
</div> </div>
</div>
); );
} }

43
app/space/page.js
View File

@ -30,7 +30,7 @@ export default function Space() {
const [activeIndex, setActiveIndex] = useState(0); const [activeIndex, setActiveIndex] = useState(0);
const [dataList, setDataList] = useState([]); const [dataList, setDataList] = useState([]);
// const [spacePost, setSpacePost] = useState([]); // const [spacePost, setSpacePost] = useState([]);
const [hasMore, setHasMore] = useState(true); const [hasMore, setHasMore] = useState(1);
const [scrollHeight, setScrollHeight] = useState(0); const [scrollHeight, setScrollHeight] = useState(0);
const [offset, setOffset] = useState(0); const [offset, setOffset] = useState(0);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@ -39,7 +39,7 @@ export default function Space() {
// 获取屏幕高度 // 获取屏幕高度
// const scrollHeight = 600; // const scrollHeight = 600;
useEffect(() => { useEffect(() => {
setScrollHeight(window.innerHeight - 57); setScrollHeight(window.innerHeight - 57 - 44);
// const handleResize = () => { // const handleResize = () => {
// setScrollHeight(window.innerHeight - 126); // setScrollHeight(window.innerHeight - 126);
// }; // };
@ -67,10 +67,10 @@ export default function Space() {
// setDataList([]); // setDataList([]);
}; };
const getSpaceList = async () => { const getSpaceList = async () => {
setLoading(true); // setLoading(true);
try { try {
const data = await requireAPI("POST", "/api/zone/list_by_visitor_mid"); const data = await requireAPI("POST", "/api/zone/list_by_visitor_mid");
setLoading(false); // setLoading(false);
if (data.ret === -1) { if (data.ret === -1) {
Toast.show({ Toast.show({
icon: "fail", icon: "fail",
@ -90,13 +90,16 @@ export default function Space() {
} }
}; };
const getSpacePosts = async (offset) => { const getSpacePosts = async (offset) => {
setLoading(true); // setLoading(true);
try { try {
const data = const data = await requireAPI(
await requireAPI("POST", "/api/zone_moment/list_by_visitor_mid", { "POST",
"/api/zone_moment/list_by_visitor_mid",
{
body: { offset, limit: 4 }, body: { offset, limit: 4 },
}); }
setLoading(false); );
// setLoading(false);
if (data.ret === -1) { if (data.ret === -1) {
Toast.show({ Toast.show({
icon: "fail", icon: "fail",
@ -106,9 +109,10 @@ export default function Space() {
return; return;
} }
//在末尾添加元素以展示查看更多卡片 //在末尾添加元素以展示查看更多卡片
setHasMore(data.data.more);
setOffset(data.data.offset);
if (data.data.list.length !== 0) { if (data.data.list.length !== 0) {
const finalData = [...data.data.list]; const finalData = [...data.data.list];
setOffset(offset + 1);
return finalData; return finalData;
} }
} catch (error) { } catch (error) {
@ -120,13 +124,13 @@ export default function Space() {
const append = await getSpacePosts(offset); const append = await getSpacePosts(offset);
if (append) { if (append) {
setDataList((val) => [...val, ...append]); setDataList((val) => [...val, ...append]);
setHasMore(append.length > 0); // setHasMore(append.length > 0);
} }
} }
return ( return (
<div <div
className="h-screen overflow-x-hidden" className="h-screen overflow-x-hidden"
style={{ maxHeight: `${scrollHeight}px` }} // style={{ maxHeight: `${scrollHeight}px` }}
> >
<div className="flex justify-between items-center px-2 custom-tabs text-gray-400 sticky top-0 z-10 bg-deepBg"> <div className="flex justify-between items-center px-2 custom-tabs text-gray-400 sticky top-0 z-10 bg-deepBg">
<Tabs <Tabs
@ -166,9 +170,13 @@ export default function Space() {
{!activeIndex && ( {!activeIndex && (
<div> <div>
{!loading ? ( {!loading ? (
<div className="px-4 pb-8"> // <div className="px-4 pb-8">
// </div>
<>
{dataList?.length > 0 ? ( {dataList?.length > 0 ? (
<ul className="grid grid-cols-2 gap-2 overflow-y-auto"> <div className="px-4 pb-8">
<ul className="grid grid-cols-2 gap-2 overflow-y-auto">
{dataList?.map((item) => ( {dataList?.map((item) => (
<li key={item.id}> <li key={item.id}>
<VisitingCard data={item} /> <VisitingCard data={item} />
@ -209,6 +217,7 @@ export default function Space() {
</div> </div>
</li> </li>
</ul> </ul>
</div>
) : ( ) : (
<div <div
className={`flex flex-col items-center justify-center`} className={`flex flex-col items-center justify-center`}
@ -231,7 +240,7 @@ export default function Space() {
</div> </div>
</div> </div>
)} )}
</div> </>
) : ( ) : (
<div <div
className="w-full text-center flex items-center justify-center" className="w-full text-center flex items-center justify-center"
@ -266,14 +275,14 @@ export default function Space() {
))} ))}
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} /> <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
</List> </List>
{!dataList?.length && ( {/* {!dataList?.length && (
<div <div
className={`flex flex-col items-center justify-center`} className={`flex flex-col items-center justify-center`}
style={{ height: `${scrollHeight}px` }} style={{ height: `${scrollHeight}px` }}
> >
<Empty type="nodata" /> <Empty type="nodata" />
</div> </div>
)} )} */}
</div> </div>
)} )}
</Swiper.Item> </Swiper.Item>

4
components/Photos/index.js
View File

@ -7,7 +7,7 @@ import { faAngleUp, faClose, faSave } from "@fortawesome/free-solid-svg-icons";
import { saveFile } from "@/utils/tools/handleFuns"; import { saveFile } from "@/utils/tools/handleFuns";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import baseRequest from "@/utils/baseRequest"; import baseRequest from "@/utils/baseRequest";
export default function Photos({ isUnlocked, mediaAmount, media, type }) { export default function Photos({ isUnlocked, mediaAmount, media, type, data }) {
const [seeAllPhotos, setSeeAllPhotos] = useState(false); const [seeAllPhotos, setSeeAllPhotos] = useState(false);
const [currentPhotos, setCurrentPhotos] = useState([]); const [currentPhotos, setCurrentPhotos] = useState([]);
const [photos, setPhotos] = useState([]); const [photos, setPhotos] = useState([]);
@ -185,7 +185,7 @@ export default function Photos({ isUnlocked, mediaAmount, media, type }) {
}} }}
> >
{ {
<div className="overflow-hidden rounded h-full min-h-[24vw] max-h-80"> <div className={`overflow-hidden rounded h-full max-h-80 ${currentPhotos.length>1?"min-h-[24vw]":"min-h-[38vw]"}`}>
<Image <Image
// lazy={true} // lazy={true}
placeholder={ placeholder={

1
components/PostItem/index.js
View File

@ -132,6 +132,7 @@ export default function PostItem({
<div className="mr-8"> <div className="mr-8">
{data.media_component && ( {data.media_component && (
<Photos <Photos
data={data}
media={data.media_component} media={data.media_component}
isUnlocked={data.is_zone_moment_unlocked} isUnlocked={data.is_zone_moment_unlocked}
mediaAmount={data.media_amount} mediaAmount={data.media_amount}