完善我的页面样式

2024-07-02 23:08:38 +08:00 · 2024-07-02 23:08:38 +08:00 · c36206fe02
parent 288568703e
commit c36206fe02
16 changed files with 660 additions and 16 deletions
--- a/.gitignore
+++ b/.gitignore
@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+package-lock.json
+yarn.lock
--- a/app/my/editUserProfile/editUserName/page.js
+++ b/app/my/editUserProfile/editUserName/page.js
@ -0,0 +1,51 @@
+"use client";
+
+import React, { useState } from "react";
+import { Input, Button } from "antd-mobile";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";
+import { useRouter } from "next/navigation";
+export default function EditUserName() {
+  const router = useRouter();
+  const [name, setName] = useState();
+  return (
+    <div>
+      <div className="p-4 fixed top-0 z-10 w-full">
+        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
+          <FontAwesomeIcon
+            icon={faAngleLeft}
+            size="xl"
+            onClick={() => {
+              router.back();
+            }}
+          />
+        </div>
+        <p className="text-base text-center leading-9">修改资料</p>
+      </div>
+      {/* 内容 */}
+      <div className="pt-16 px-4">
+        <div className="flex items-center rounded-full bg-[#FFFFFF1A] text-white h-12 px-4">
+          <Input
+            placeholder="请输入新昵称"
+            max={8}
+            onChange={(value) => setName(value)}
+            value={"铁粉空间"}
+            style={{ "--placeholder-color": "#FFFFFF80" }}
+          />
+        </div>
+        <div className="mt-16">
+        <Button
+          shape="rounded"
+          size="middle"
+          block
+          
+          // onClick={handleSubmit}
+          style={{"--background-color": "#FF669E","color": "#FFFFFF"}}
+        >
+          确认
+        </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/app/my/editUserProfile/selectUserProfileItem/page.js
+++ b/app/my/editUserProfile/selectUserProfileItem/page.js
@ -0,0 +1,67 @@
+"use client";
+
+import React from "react";
+import { Avatar, Divider } from "antd-mobile";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";
+import { useRouter } from "next/navigation";
+export default function SelectUserProfileItem() {
+  const router = useRouter();
+  return (
+    <div>
+      <div className="p-4 fixed top-0 z-10 w-full">
+        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
+          <FontAwesomeIcon
+            icon={faAngleLeft}
+            size="xl"
+            onClick={() => {
+              router.back();
+            }}
+          />
+        </div>
+        <p className="text-base text-center leading-9">修改资料</p>
+      </div>
+      {/* 内容 */}
+      <div className="pt-16 px-4">
+        <div className="flex justify-between items-center mt-2">
+          <span className="text-base font-medium">头像</span>
+          <div className="flex items-center">
+            <Avatar
+              src="https://picsum.photos/seed/picsum/200/300"
+              style={{ "--border-radius": "50px", "--size": "2rem" }}
+            />
+            <FontAwesomeIcon icon={faAngleRight} size="xl" className=" ml-2" />
+          </div>
+        </div>
+        <Divider className="my-2" />
+        <div
+          className="flex justify-between items-center mt-2"
+          onClick={() => {
+            router.push("/my/editUserProfile/editUserName");
+          }}
+        >
+          <span className="text-base font-medium">昵称</span>
+          <div>
+            <span className="text-base font-medium">铁粉空间</span>
+            <FontAwesomeIcon
+              icon={faAngleRight}
+              size="xl"
+              className=" ml-2"
+              onClick={() => {
+                router.push("my/editUserProfile/editUserName");
+              }}
+            />
+          </div>
+        </div>
+        <Divider className="my-2" />
+        <div className="flex justify-between items-center mt-2">
+          <span className="text-base font-medium">ID</span>
+          <span className="text-base text-[#FFFFFF80] font-medium">
+            45676456
+          </span>
+        </div>
+        <Divider className="my-2" />
+      </div>
+    </div>
+  );
+}
--- a/app/my/page.js
+++ b/app/my/page.js
@ -12,7 +12,7 @@ export default function My() {
  return (
    <div className="p-4 pb-20 bg-no-repeat bg-contain bg-top bg-[url(/images/profilebackground.png)]">
      <div className="flex justify-end items-center z-10 w-full mb-4">
-        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full mr-2">
+        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full mr-2" onClick={()=>router.push("my/editUserProfile/selectUserProfileItem")}>
          <Image
            src="/icons/32DP/edit.png"
            width={32}
@ -20,7 +20,7 @@ export default function My() {
            placeholder=""
          />
        </div>
-        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full">
+        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full" onClick={()=>router.push("my/setting")}>
          <Image
            src="/icons/32DP/setting.png"
            width={32}
@ -80,7 +80,7 @@ export default function My() {
        </li>
      </ul>
      {/* 会员用户 */}
-      <div className="rounded-xl p-2 border-2 border-[#2c2b2f] mb-4">
+      {/* <div className="rounded-xl p-2 border-2 border-[#2c2b2f] mb-4">
        <ul>
          <li className="flex justify-between items-center p-3 py-2">
            <div className="flex items-center">
@ -193,7 +193,7 @@ export default function My() {
            </div>
          </li>
        </ul>
-      </div>
+      </div> */}
      {/* 普通用户 */}
      <div className="rounded-xl p-2 border-2 border-[#2c2b2f]">
        <ul>
@ -235,7 +235,7 @@ export default function My() {
              }}
            />
          </li>
-          <li className="flex justify-between items-center p-3 py-2">
+          {/* <li className="flex justify-between items-center p-3 py-2" onClick={()=>router.push("my/streamerVerification")}>
            <div className="flex items-center">
              <Image
                className="mr-2"
@ -253,7 +253,7 @@ export default function My() {
                router.back();
              }}
            />
-          </li>
+          </li> */}
          <li className="flex justify-between items-center p-3 py-2">
            <div className="flex items-center">
              <Image
--- a/app/my/relationship/page.js
+++ b/app/my/relationship/page.js
@ -59,7 +59,7 @@ export default function Relationship() {
  return (
    <div className={styles.relationshipBox}>
      <div className="p-4 fixed top-0 z-10 w-full">
-        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full float-left">
+        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
          <FontAwesomeIcon
            icon={faAngleLeft}
            size="xl"
@ -89,30 +89,30 @@ export default function Relationship() {
          >
            <List className="overflow-y-auto scrollbarBox_hidden">
              <List.Item className={`!p-0 ${styles.listTimeBox}`}>
-                <div className="grid gap-2" style={{gridTemplateColumns:"48px calc(100% - 128px) 64px"}}>
-                  <Avatar src="https://picsum.photos/seed/picsum/200/300" width={48} height={48} style={{"--border-radius":"50px"}}/>
+                <div className="grid gap-2 items-center" style={{gridTemplateColumns:"48px calc(100% - 128px) 64px"}}>
+                  <Avatar src="https://picsum.photos/seed/picsum/200/300" style={{"--border-radius":"50px"}}/>
                  <div>
                    <p>XXXXXX</p>
                    <p className="text-xs truncate">
                      专属圈内容都在空间里，永久更新外面看不到哟
                    </p>
                  </div>
-                  <div className="text-base bg-[#FFFFFF1A] py-1 px-2 rounded-full whitespace-nowrap flex items-center justify-center">
+                  <div className="text-sm leading-9 h-max bg-[#FFFFFF1A] px-2 rounded-full whitespace-nowrap flex items-center justify-center">
                    关注
                  </div>
                </div>
              </List.Item>
              <List.Item className={`!p-0 ${styles.listTimeBox}`}>
-                <div className="grid gap-2" style={{gridTemplateColumns:"48px calc(100% - 128px) 64px"}}>
-                  <Avatar src="https://picsum.photos/seed/picsum/200/300" width={48} height={48} style={{"--border-radius":"50px"}}/>
+                <div className="grid gap-2 items-center" style={{gridTemplateColumns:"48px calc(100% - 128px) 64px"}}>
+                  <Avatar src="https://picsum.photos/seed/picsum/200/300" style={{"--border-radius":"50px"}}/>
                  <div>
                    <p>XXXXXX</p>
-                    <p className="text-xs truncate">
+                    <p className="text-sm truncate">
                      专属圈内容都在空间里，永久更新外面看不到哟
                    </p>
                  </div>
-                  <div className="text-base bg-[#FFFFFF1A] py-1 px-2 rounded-full whitespace-nowrap flex items-center justify-center">
-                    关注
+                  <div className="text-sm leading-9 h-max bg-[#FFFFFF1A] px-2 rounded-full whitespace-nowrap flex items-center justify-center">
+                    已关注
                  </div>
                </div>
              </List.Item>
--- a/app/my/setting/aboutUs/page.js
+++ b/app/my/setting/aboutUs/page.js
@ -0,0 +1,90 @@
+"use client";
+
+import React from "react";
+import { Image } from "antd-mobile";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faAngleLeft,
+  faAngleRight,
+  faEye,
+  faHandshakeSimple,
+} from "@fortawesome/free-solid-svg-icons";
+import { useRouter } from "next/navigation";
+export default function AboutUs() {
+  const router = useRouter();
+  return (
+    <div>
+      <div className="p-4 fixed top-0 z-10 w-full">
+        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
+          <FontAwesomeIcon
+            icon={faAngleLeft}
+            size="xl"
+            onClick={() => {
+              router.back();
+            }}
+          />
+        </div>
+        <p className="text-base text-center leading-9">关于我们</p>
+      </div>
+      {/* 内容 */}
+      <div className="pt-16 p-4 flex flex-col justify-center items-center">
+        <Image
+          className="my-16"
+          width="46%"
+          src="/images/logo.png"
+          placeholder=""
+        />
+
+        <div className="rounded-xl p-2 border-2 border-[#2c2b2f] w-full">
+          <ul>
+            <li
+              className="flex justify-between items-center p-3"
+              onClick={() => router.push("my/wallet")}
+            >
+              <div className="flex items-center">
+                <FontAwesomeIcon
+                  icon={faHandshakeSimple}
+                  size="sm"
+                  className="h-4 text-white mr-2"
+                  onClick={() => {
+                    router.back();
+                  }}
+                />
+                <span className="text-base text-white">用户协议</span>
+              </div>
+              <FontAwesomeIcon
+                icon={faAngleRight}
+                size="sm"
+                className="h-4 text-gray-300"
+                onClick={() => {
+                  router.back();
+                }}
+              />
+            </li>
+            <li className="flex justify-between items-center p-3">
+              <div className="flex items-center">
+                <FontAwesomeIcon
+                  icon={faEye}
+                  size="sm"
+                  className="h-4 text-white mr-2"
+                  onClick={() => {
+                    router.back();
+                  }}
+                />
+                <span className="text-base text-white">隐私政策</span>
+              </div>
+              <FontAwesomeIcon
+                icon={faAngleRight}
+                size="sm"
+                className="h-4 text-gray-300"
+                onClick={() => {
+                  router.back();
+                }}
+              />
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/app/my/setting/deleteAccount/page.js
+++ b/app/my/setting/deleteAccount/page.js
@ -0,0 +1,71 @@
+"use client";
+
+import React, { useState } from "react";
+import { Button } from "antd-mobile";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faAngleLeft,
+} from "@fortawesome/free-solid-svg-icons";
+import { useRouter } from "next/navigation";
+import { formatDeadline } from "@/utils/tools";
+export default function DeleteAccount() {
+  const [deadline, setDeadline] = useState();
+  const router = useRouter();
+  return (
+    <div>
+      <div className="p-4 fixed top-0 z-10 w-full">
+        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
+          <FontAwesomeIcon
+            icon={faAngleLeft}
+            size="xl"
+            onClick={() => {
+              router.back();
+            }}
+          />
+        </div>
+        <p className="text-base text-center leading-9">注销用户</p>
+      </div>
+      {/* 内容 */}
+      <div className="pt-16 p-4">
+        <p className="text-white text-lg font-medium">注销必看须知:</p>
+        <div className="bg-[#13121F] rounded-2xl p-3 mt-2">
+          <p className="text-white text-base font-medium">1、账号个人信息</p>
+          <p className="text-[#FFFFFFB2] text-base">
+            账号注销后，您将永远失去该账户的所有内容，且无法恢复。包括但不限于：个人资料信息、访问记录、关注列表、私信聊天记录等。
+          </p>
+          <p className="text-white text-base font-medium mt-2">
+            2、账号资产与权益
+          </p>
+          <p className="text-[#FFFFFFB2] text-base">
+            账号注销后，您将失去所有账号使用期间获得的资产与权益，且无法恢复。包括但不限于您的金币、钻石、会员特权以及其他已付费的订单商品等。
+          </p>
+          <p className="text-white text-base font-medium mt-2">3、注销时间</p>
+          <p className="text-[#FFFFFFB2] text-base">
+            您发起注销账户申请后，我们将在7个自然日后完全清除您的账号信息，在此期间您可以随时在本页面撤销该申请。
+          </p>
+          <p className="text-white text-base font-medium mt-2">4、其他</p>
+          <p className="text-[#FFFFFFB2] text-base">
+            平台入驻创作者请联系运营进行注销。
+          </p>
+        </div>
+        {deadline && (
+          <p className="text-[#F53030] text-base font-medium mt-2">
+            您的账号将于{formatDeadline(deadline)}
+            注销，如需取消注销，请点击下方“取消注销”
+          </p>
+        )}
+        <div className="mt-16">
+          <Button
+            shape="rounded"
+            size="middle"
+            block
+            // onClick={handleSubmit}
+            style={{ "--background-color": "#FF669E", color: "#FFFFFF" }}
+          >
+            {deadline ? "取消注销" : "确认注销账号"}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/app/my/setting/editPassword/page.js
+++ b/app/my/setting/editPassword/page.js
@ -0,0 +1,107 @@
+"use client";
+
+import React, { useState } from "react";
+import { Button, Input, Divider } from "antd-mobile";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
+import { useRouter } from "next/navigation";
+import UploadImgs from "@/components/UploadImgs";
+export default function EditPassword() {
+  const [regionCode, setRegionCode] = useState("");
+  const [mobilePhone, setMobilePhone] = useState("");
+  const [veriCode, setVeriCode] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [isCounting, setIsCounting] = useState(false);
+  const [seconds, setSeconds] = useState(60);
+  const router = useRouter();
+  return (
+    <div>
+      <div className="p-4 fixed top-0 z-10 w-full">
+        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
+          <FontAwesomeIcon
+            icon={faAngleLeft}
+            size="xl"
+            onClick={() => {
+              router.back();
+            }}
+          />
+        </div>
+        <p className="text-base text-center leading-9"></p>
+      </div>
+      {/* 内容 */}
+      <div className="pt-32 px-4">
+        <p className="text-3xl text-white font-medium">修改密码</p>
+        <p className="text-base text-white mb-10">请牢记密码</p>
+        <div className="border-2 border-[#2c2b2f] rounded-2xl p-4">
+          <div className="flex flex-row flex-nowrap items-center mb-4">
+            <p className="text-base text-white mr-4">+{regionCode}</p>
+            <Input
+              placeholder="未获取到手机号，请重新登录"
+              // disabled={true}
+              type="number"
+              maxLength={11}
+              onChangeText={(value) => setMobilePhone(value)}
+              value={mobilePhone}
+              style={{"--color":"#FFFFFF","--font-size":"16px"}}
+            />
+          </div>
+          <Divider />
+          <div className="flex flex-row flex-nowrap items-center my-4">
+            <p className="text-base text-white mr-4 whitespace-nowrap">验证码</p>
+            <Input
+              placeholder="请输入验证码"
+              onChangeText={(value) => setVeriCode(value)}
+              value={veriCode}
+              type="number"
+              style={{"--placeholder-color":"#FFFFFF80","--font-size":"16px"}}
+            />
+            <Button
+              shape="rounded"
+              size="mini"
+              disabled={isCounting}
+              // onClick={handleSubmit}
+              style={{ "--background-color": "#FF669E", color: "#FFFFFF" }}
+              className="whitespace-nowrap"
+            >
+              {isCounting ? `(${seconds})重新发送` : "获取验证码"}
+            </Button>
+          </div>
+          <Divider />
+          <div className="flex flex-row flex-nowrap items-center my-4">
+            <p className="text-base text-white mr-4 whitespace-nowrap">新密码</p>
+            <Input
+              placeholder="请输入8-15位新密码"
+              placeholderTextColor="#FFFFFF80"
+              underlineColorAndroid="transparent"
+              onChangeText={(value) => setNewPassword(value)}
+              value={newPassword}
+              style={{"--placeholder-color":"#FFFFFF80","--font-size":"16px"}}
+            />
+          </div>
+          <Divider />
+          <div className="flex flex-row flex-nowrap items-center mt-4">
+            <p className="text-base text-white mr-4 whitespace-nowrap">确认密码</p>
+            <Input
+              placeholder="请再次输入新密码"
+              onChangeText={(value) => setConfirmPassword(value)}
+              value={confirmPassword}
+              style={{"--placeholder-color":"#FFFFFF80","--font-size":"16px"}}
+            />
+          </div>
+        </div>
+        <div className="mt-16">
+          <Button
+            shape="rounded"
+            size="middle"
+            block
+            // onClick={handleSubmit}
+            style={{ "--background-color": "#FF669E", color: "#FFFFFF" }}
+          >
+            确认修改
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/app/my/setting/feedback/page.js
+++ b/app/my/setting/feedback/page.js
@ -0,0 +1,59 @@
+"use client";
+
+import React, { useState } from "react";
+import { Button, TextArea } from "antd-mobile";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faAngleLeft,
+} from "@fortawesome/free-solid-svg-icons";
+import { useRouter } from "next/navigation";
+import UploadImgs from "@/components/UploadImgs";
+export default function Feedback() {
+  const [value, setValue] = useState();
+  const [assets, setAssets] = useState([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const router = useRouter();
+  return (
+    <div>
+      <div className="p-4 fixed top-0 z-10 w-full">
+        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
+          <FontAwesomeIcon
+            icon={faAngleLeft}
+            size="xl"
+            onClick={() => {
+              router.back();
+            }}
+          />
+        </div>
+        <p className="text-base text-center leading-9">意见反馈</p>
+      </div>
+      {/* 内容 */}
+      <div className="pt-16 p-4">
+        <p className="text-base font-medium text-white">反馈描述</p>
+        <TextArea
+          placeholder="请填写详细描述，以便我们更好地为您解决问题"
+          onChange={(value) => setValue(value)}
+          value={value}
+          className="h-32 bg-[#FFFFFF1A] text-white rounded-2xl mt-2 p-2"
+          style={{ "--placeholder-color": "#FFFFFF80", "--font-size": "14px" }}
+        />
+        <p className="text-base font-medium text-white mt-4 mb-1">
+          截图或录屏（最多9张）
+        </p>
+        <UploadImgs/>
+        <div className="mt-16">
+          <Button
+            shape="rounded"
+            size="middle"
+            block
+            // onClick={handleSubmit}
+            style={{ "--background-color": "#FF669E", color: "#FFFFFF" }}
+          >
+            {/* {isSubmitting && <ActivityIndicator size="small" color="white" />} */}
+            {isSubmitting ? "正在提交..." : "提交"}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/app/my/setting/page.js
+++ b/app/my/setting/page.js
@ -0,0 +1,61 @@
+"use client";
+
+import React from "react";
+import { List } from "antd-mobile";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
+import { useRouter } from "next/navigation";
+export default function Setting() {
+  const router = useRouter();
+  return (
+    <div>
+      <div className="p-4 fixed top-0 z-10 w-full">
+        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
+          <FontAwesomeIcon
+            icon={faAngleLeft}
+            size="xl"
+            onClick={() => {
+              router.back();
+            }}
+          />
+        </div>
+        <p className="text-base text-center leading-9">设置</p>
+      </div>
+      {/* 内容 */}
+      <div className="pt-16 ">
+        <List mode="card">
+          <List.Item arrow onClick={() => {
+            router.push("/my/setting/switchAccount");
+          }}>切换账号</List.Item>
+          <List.Item arrow onClick={() => {
+            router.push("/my/setting/editPassword");
+          }}>修改密码</List.Item>
+          <List.Item
+            arrow
+            onClick={() => {
+              router.push("/my/setting/feedback");
+            }}
+          >
+            意见反馈
+          </List.Item>
+          <List.Item
+            arrow
+            onClick={() => {
+              router.push("/my/setting/deleteAccount");
+            }}
+          >
+            账号注销
+          </List.Item>
+          <List.Item
+            arrow
+            onClick={() => {
+              router.push("/my/setting/aboutUs");
+            }}
+          >
+            关于我们
+          </List.Item>
+        </List>
+      </div>
+    </div>
+  );
+}
--- a/app/my/setting/switchAccount/page.js
+++ b/app/my/setting/switchAccount/page.js
@ -0,0 +1,99 @@
+"use client";
+
+import React, { useState } from "react";
+import { SwipeAction, Image, Avatar, Divider, Button } from "antd-mobile";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faAngleLeft,
+  faRemove,
+  faAdd,
+  faCheck
+} from "@fortawesome/free-solid-svg-icons";
+import { useRouter } from "next/navigation";
+const rightActions = [
+  {
+    key: "delete",
+    text: (
+      <div>
+        <FontAwesomeIcon
+          className="mr-2"
+          icon={faRemove}
+          // size="sm"
+        />
+        <span>删除</span>
+      </div>
+    ),
+    color: "danger",
+  },
+];
+export default function SwitchAccount() {
+  const [accountList, setAccountList] = useState([1, 2]);
+  const router = useRouter();
+  return (
+    <div>
+      <div className="p-4 fixed top-0 z-10 w-full">
+        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
+          <FontAwesomeIcon
+            icon={faAngleLeft}
+            size="xl"
+            onClick={() => {
+              router.back();
+            }}
+          />
+        </div>
+        <p className="text-base text-center leading-9">切换账号</p>
+      </div>
+      {/* 内容 */}
+      <div className="pt-16 p-4 flex flex-col justify-center items-center">
+        <ul className="w-full">
+          {accountList.map((item) => (
+            <li
+              key={item}
+              className="flex justify-between items-center w-full border-b-2 border-[#FFFFFF1A]"
+              // onClick={() => {}}
+            >
+              <SwipeAction
+                key={item}
+                rightActions={rightActions}
+                className="w-full h-full"
+                style={{ "--background": "none" }}
+              >
+                <div className="flex justify-between items-center">
+                  <div className="flex items-center py-3">
+                    <Avatar
+                      src="https://picsum.photos/seed/picsum/200/300"
+                      style={{ "--border-radius": "50px", "--size": "3rem" }}
+                      className="mr-2"
+                    />
+                    <div>
+                      <p>铁粉空间</p>
+                      <div className="h-4 flex items-center text-xs bg-[#ffffff18] rounded-full px-2 py-2.5 mb-1">
+                        <Image
+                          src="/icons/info/ID.png"
+                          width={14}
+                          className="w-4 h-full mr-1"
+                        />
+                        <span>213422</span>
+                      </div>
+                    </div>
+                  </div>
+                  <FontAwesomeIcon
+                    icon={faCheck}
+                    color="#27F5B7"
+                    size="xl"
+                  />
+                </div>
+              </SwipeAction>
+            </li>
+          ))}
+        </ul>
+        <div className="w-full flex items-center justify-center px-4 py-2 bg-[#FFFFFF1A] rounded-full mt-4">
+          <FontAwesomeIcon icon={faAdd} size="xl" />
+          <span className="text-white text-base font-medium ml-1">
+            添加或注册账号
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/app/profile/page.js
+++ b/app/profile/page.js
@ -121,7 +121,7 @@ export default function PersonSpace() {
                    src="/icons/info/ID.png"
                    width={14}
                    className="w-4 h-full mr-1"
-                  />{" "}
+                  />
                  <span>213422</span>
                </li>
              </ul>
--- a/app/space/page.js
+++ b/app/space/page.js
@ -230,6 +230,7 @@ const VisitingCard = () => {
        width={"100%"}
        height={"100%"}
        src="https://picsum.photos/seed/picsum/200/300"
+        fit ="cover"
        className="rounded-lg"
      />
      <div className="absolute bottom-0 left-0 w-full px-2 py-3 bg-[#1b1b1b] flex items-center rounded-b-lg">
--- a/components/UploadImgs/index.js
+++ b/components/UploadImgs/index.js
@ -0,0 +1,23 @@
+import React, { useState } from "react";
+import {ImageUploader,Toast} from "antd-mobile";
+export default function UploadImgs(props) {
+  const maxCount = 6;
+  const [fileList, setFileList] = useState([
+  ]);
+
+  return (
+    <ImageUploader
+      value={fileList}
+      onChange={setFileList}
+      // upload={mockUpload}
+      multiple
+      maxCount={9}
+      showUpload={fileList.length < maxCount}
+      onCountExceed={(exceed) => {
+        Toast.show(`最多选择 ${maxCount} 张图片，你多选了 ${exceed} 张`);
+      }}
+    >
+        <div className="flex justify-center items-center h-[80px] w-[80px] border-2 border-gray-400 border-dashed rounded-md text-2xl text-gray-400">+</div>
+    </ImageUploader>
+  );
+}
--- a/public/images/logo.png
+++ b/public/images/logo.png
--- a/utils/tools.js
+++ b/utils/tools.js
@ -0,0 +1,12 @@
+//格式化时间戳
+export function formatDeadline(timestamp) {
+    const date = new Date(timestamp * 1000); // 时间戳以秒为单位，需要乘以1000转换成毫秒
+    const year = date.getFullYear();
+    const month = ("0" + (date.getMonth() + 1)).slice(-2);
+    const day = ("0" + date.getDate()).slice(-2);
+    const hours = ("0" + date.getHours()).slice(-2);
+    const minutes = ("0" + date.getMinutes()).slice(-2);
+    const seconds = ("0" + date.getSeconds()).slice(-2);
+
+    return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
+  }