diff --git a/app/globals.css b/app/globals.css index 7c94d56..e6089a4 100644 --- a/app/globals.css +++ b/app/globals.css @@ -71,3 +71,8 @@ body { .whitespace-no-wrap{ white-space: nowrap; } + + +.imageBlur{ + filter: blur(8px); +} \ No newline at end of file diff --git a/app/index.css b/app/index.css index e10415c..5b6a60f 100644 --- a/app/index.css +++ b/app/index.css @@ -9,15 +9,16 @@ /* .custom-tabs .adm-tabs .adm-tabs-tab { color: #a0a0a0; } */ -.custom-tabs .adm-tabs .adm-tabs-tab-active { +.custom-tabs .adm-tabs .adm-tabs-tab { font-weight: bold; + font-size: 24px; } .custom-tabs .adm-tabs-tab-line { background: none; background-image: url(http://localhost:3000/icons/tabindicator.png); height: 34px; - background-position: -3px -7px; + background-position: -2px -18px; background-size: cover; background-repeat: no-repeat; z-index: 1; @@ -26,5 +27,8 @@ .custom-tabs .adm-tabs-header { border-bottom: none; } +.adm-list-body-inner { + margin-top: 8px; +} diff --git a/app/layout.js b/app/layout.js index 7ad41a3..ee112da 100644 --- a/app/layout.js +++ b/app/layout.js @@ -4,10 +4,27 @@ import "./globals.css"; const inter = Inter({ subsets: ["latin"] }); export const metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "铁粉空间", + description: "与Ta永不失联", + keywords: [ + "铁粉空间", + "铁粉空间APP", + "社交", + "网红", + "粉丝", + "创作者", + "变现", + "平台", + "铁粉", + "空间", + ], +}; +export const viewport = { + width: "device-width", + initialScale: 1, + maximumScale: 1, + userScalable: 0, }; - export default function RootLayout({ children }) { return ( -
+
{ @@ -123,8 +123,7 @@ export default function Home() { @@ -154,7 +153,7 @@ export default function Home() { -
+
diff --git a/app/pay/page.js b/app/pay/page.js new file mode 100644 index 0000000..2580d1d --- /dev/null +++ b/app/pay/page.js @@ -0,0 +1,108 @@ +"use client"; + +import React, { useEffect, useRef, useState } from "react"; +import { Mask, Divider } from "antd-mobile"; +import { useRouter } from "next/navigation"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faAngleLeft } from "@fortawesome/free-solid-svg-icons"; +export default function Pay() { + const router = useRouter(); + const [visible, setVisible] = useState(false); + // 获取屏幕高度 + // const scrollHeight = 600; + useEffect(() => {}, []); + return ( +
+
+
+ { + router.back(); + }} + /> +
+
+ {/* 内容 */} +
+
+

¥39.90

+
+
+ 付费商品： + 草莓不可爱-空间成员 +
+ +
+ 有效期： + 永久 +
+ +
+
+
+

购买须知：

+

+ 1、本空间由空间主人自行创建，加入空间前请确认相关风险，避免上当受骗； +
+ 2、当前开通的空间成员身份仅针对当前空间生效，请确认空间名称与与空间主人； +
+ 3、当前购买内容为空间成员身份，开通后可获得当前空间内成员身份查阅权限； +
+ 4、虚拟商品一经售出不予退款，请确认阅读上述条款并无异议后进行购买； +
+ 5、本平台不提供违法及色情内容，如您发现空间内存在以上内容，请联系人工客服举报处理； +
+ 6、本项权益内容最终解释权归铁粉空间运营方所有。 +

+
+
+
+
+
+ {/* */} +
{ + router.push("/pay"); + }} + > + 支付宝支付 +
+
+

+ 确认购买即视为同意 + setVisible(true)}> + 《用户充值协议》 + +

+
+
+ +
setVisible(false)} + > +
+
+
+ { + setVisible(false) + }} + /> +
+

铁粉空间充值协议

+
+ +

更新时间：2023年12月20日

+

生效日期：2023年12月20日

+
+
+ +
+ ); +} diff --git a/app/space/person_space/page.js b/app/space/person_space/page.js new file mode 100644 index 0000000..43039ad --- /dev/null +++ b/app/space/person_space/page.js @@ -0,0 +1,190 @@ +"use client"; + +import React, { useEffect, useRef, useState } from "react"; +import { Image, Swiper, Divider } from "antd-mobile"; +import { useRouter } from "next/navigation"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { + faAngleLeft, + faAngleRight, + faEllipsisVertical, + faCopy, +} from "@fortawesome/free-solid-svg-icons"; +export default function PersonSpace() { + const router = useRouter(); + // 获取屏幕高度 + // const scrollHeight = 600; + const [searchValue, setSearchValue] = useState(""); + const photos = [ + "https://picsum.photos/seed/picsum/200/300", + "https://picsum.photos/seed/picsum/200/300", + ]; + useEffect(() => {}, []); + return ( +
+
+
+ { + router.back(); + }} + /> +
+ + { + router.back(); + }} + /> +
+ {/* 内容 */} +
+
+ + {photos.map((photo, index) => ( + + { + Toast.show(`你点击了卡片 ${index + 1}`); + }} + /> + + ))} + +
+
+
+
+
+

PUPIHAN

+
+ +
+
+
    +
  • + 颜值高 +
    • +
  • + 身材好 +
    • +
  • + 女王范 +
    • +
+
+
+
    +
  • + {" "} + 213422 +
    • +
+

+ 个性签名｜ + 专属圈内容都在空间里，永久更新外面看不到哟 +

+
+
+ +
+
router.push("/space/person_space_introduce")}> +
+ 空间动态 +
+ 查看60条 + { + router.back(); + }} + /> +
+
+
+ +
+ +
+
+
+
+ +
+

来这找我玩

+
    +
  • +
    + +
    + 微信： + PUPIHAN +
    +
    +
    +
    + { + router.back(); + }} + /> + 复制 +
    +
    + { + router.back(); + }} + /> + 前往 +
    +
    +
    • +
+
+
+
+
关注
+
添加微信
+
+
+
+ ); +} diff --git a/app/space/person_space_introduce/page.js b/app/space/person_space_introduce/page.js new file mode 100644 index 0000000..69802cc --- /dev/null +++ b/app/space/person_space_introduce/page.js @@ -0,0 +1,204 @@ +"use client"; + +import React, { useEffect, useState, useRef } from "react"; +import { Image, Mask } from "antd-mobile"; +import { useRouter } from "next/navigation"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons"; +export default function PersonSpaceIntroduce() { + const router = useRouter(); + const contentBox = useRef(); + // 获取屏幕高度 + // const scrollHeight = 600; + const photos = [ + "https://picsum.photos/seed/picsum/200/300", + "https://picsum.photos/seed/picsum/200/300", + ]; + const [visible, setVisible] = useState(false); + useEffect(() => { + if (contentBox.current) { + contentBox.current.style.transform = "translateY(-12px)"; + // debugger + } + }, []); + return ( +
+
+
+ { + router.back(); + }} + /> +
+
+ {/* 内容 */} +
+
+
+
+
+ +
+

草莓不可爱

+
+ + 213422 +
+
+
+
setVisible(true)} + > +
+ +
+

查看微信

+
+
+
    +
  • +

    38

    +

    动态

    +
    • +
  • +

    38

    +

    照片

    +
    • +
  • +

    38

    +

    视频

    +
    • +
+
+
+
+

空间介绍

+

+ 草莓秘密基地，一次进入永久权限。都是你想看到的哟。 +

+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+

付费须知

+
+

+ 1、加入后，您可以查看空间内相关内容； +

+

+ 2、本空间由空间主人自行创建，加入空间前请确认相关风险，本平台不提供相关保证，请避免上当受骗； +

+

+ 3、虚拟商品一经售出不予退款，请确认阅读上述条款并无异议后进行购买。 +

+

+ 4、本平台不提供违法及色情内容，如您发现空间内存在以上内容，请联系人工客服举报处理。 +

+
+
+
+ +
setVisible(false)}> +
+ +

草莓不可爱

+
+ 解锁后展示 +
+

+ 添加时请备注自己“铁粉空间”昵称 +
+ 若解锁后72小时为通过好友，请联系客服 +

+
+ 解锁微信（990金币） +
+
+
+ +
+
+ {/* */} +
{ + router.push("/pay"); + }}> + 39.9元立即加入 + +
+
+
+
+
+ ); +} diff --git a/components/Photos/index.js b/components/Photos/index.js index 65f65c0..69d4ae8 100644 --- a/components/Photos/index.js +++ b/components/Photos/index.js @@ -21,15 +21,15 @@ export default function Photos({ photos }) { return (
{ showPhotos(photos, index); }} > 1 ? "24vw" : 150} - height={photos.length > 1 ? "24vw" : "auto"} - className="rounded-lg" + width={photos.length > 1 ? "25vw" : 150} + height={photos.length > 1 ? "25vw" : "auto"} + className="rounded" fit="cover" src="https://picsum.photos/seed/picsum/200/300" /> diff --git a/components/PostItem/index.js b/components/PostItem/index.js index 0f7330a..2e8ad6c 100644 --- a/components/PostItem/index.js +++ b/components/PostItem/index.js @@ -2,15 +2,17 @@ import React, { useRef, useState } from "react"; import Photos from "../Photos"; - +import { useRouter } from "next/navigation"; export default function PostItem({ follow }) { + const router = useRouter(); return (
router.push("/space/person_space")} />
@@ -19,7 +21,7 @@ export default function PostItem({ follow }) { {follow?"已关注":"关注"}
-

御姐风细跟高跟鞋太绝了

+

御姐风细跟高跟鞋太绝了