diff --git a/app/globals.css b/app/globals.css
index 1cdcab7..52db484 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -96,7 +96,7 @@ textarea {
 
 .custom-tabs .adm-tabs-tab-line {
   background: none;
-  background-image: url("https://filecdn01.tiefen.fun/web_app_public/icons/tabindicator.png");
+  background-image: url("https://filecdntx01.tiefen.fun/web_app_public/icons/tabindicator.png");
   height: 34px;
   background-position: -2px -18px;
   background-size: cover;
@@ -179,6 +179,7 @@ textarea {
 
 .adm-list-body,
 .adm-list-item {
+  padding: 0 !important;
   border: none !important;
   background: none !important;
 }
@@ -194,7 +195,7 @@ textarea {
 .tabPinkLine::after {
   content: "";
   position: absolute;
-  background-image: url("https://filecdn01.tiefen.fun/web_app_public/icons/tabindicator.png");
+  background-image: url("https://filecdntx01.tiefen.fun/web_app_public/icons/tabindicator.png");
   height: 34px;
   background-position: -2px -18px;
   background-size: cover;
@@ -207,7 +208,7 @@ textarea {
 .titlePinkLine::after {
   content: "";
   position: absolute;
-  background-image: url("https://filecdn01.tiefen.fun/web_app_public/icons/pinkline.png");
+  background-image: url("https://filecdntx01.tiefen.fun/web_app_public/icons/pinkline.png");
   height: 12px;
   width: inherit;
   min-width: 42px;
@@ -304,6 +305,7 @@ textarea {
 
 .adm-list-item-content {
   padding: 0;
+  border: none!important;
 }
 .customize-body img {
   max-height: 90vh;
@@ -390,3 +392,11 @@ textarea {
     }
   }
 }
+
+.adm-slider-track{
+  background-color: #ff669e40 !important;
+}
+.adm-slider-thumb{
+  background-color: #ff669e !important;
+  transform: scale(0.5);
+}
\ No newline at end of file
diff --git a/app/index.css b/app/index.css
index bdcfdb0..8dd2526 100644
--- a/app/index.css
+++ b/app/index.css
@@ -16,7 +16,7 @@
 
 .custom-tabs .adm-tabs-tab-line {
   background: none;
-  background-image: url("https://filecdn01.tiefen.fun/web_app_public/icons/tabindicator.png");
+  background-image: url("https://filecdntx01.tiefen.fun/web_app_public/icons/tabindicator.png");
   height: 34px;
   background-position: -2px -18px;
   background-size: cover;
@@ -30,11 +30,11 @@
 .adm-list-body-inner {
   /* margin-top: 8px; */
 }
-.adm-image-viewer-indicator{
+.adm-image-viewer-indicator {
   color: #fff;
 }
 
-.imagesBtnsControllers{
+.imagesBtnsControllers {
   position: fixed;
   top: 50%;
   width: 100%;
@@ -44,19 +44,20 @@
   z-index: 10001;
   pointer-events: none;
 }
-.imagesBtnsControllerLeft,.imagesBtnsControllerRight{
+.imagesBtnsControllerLeft,
+.imagesBtnsControllerRight {
   width: 42px;
   height: 42px;
   border-radius: 53px;
-  background-color: #0000001A;
+  background-color: #0000001a;
   background-size: contain;
   background-repeat: no-repeat;
   pointer-events: all;
 }
-.imagesBtnsControllerLeft{
+.imagesBtnsControllerLeft {
   background-image: url("/icons/left.png");
   opacity: 0.5;
 }
-.imagesBtnsControllerRight{
+.imagesBtnsControllerRight {
   background-image: url("/icons/right.png");
-}
\ No newline at end of file
+}
diff --git a/app/login/index.module.scss b/app/login/index.module.scss
index 5bc1412..60954a9 100644
--- a/app/login/index.module.scss
+++ b/app/login/index.module.scss
@@ -15,7 +15,7 @@
 }
 .customTabs>div>div:last-child>div:first-child::after{
   content: "";
-  background-image: url("https://filecdn01.tiefen.fun/web_app_public/icons/tabindicator.png");
+  background-image: url("https://filecdntx01.tiefen.fun/web_app_public/icons/tabindicator.png");
   height: 44px;
   background-size: cover;
   background-repeat: no-repeat;
diff --git a/app/my/page.js b/app/my/page.js
index 184aa5e..7e742a3 100644
--- a/app/my/page.js
+++ b/app/my/page.js
@@ -3,10 +3,12 @@
 import React, { useEffect, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
-import { Avatar, Image, Toast, Space } from "antd-mobile";
+import { Avatar, Toast, Space } from "antd-mobile";
 import { useRouter } from "next/navigation";
 import { get } from "@/utils/storeInfo";
 import requireAPI from "@/utils/requireAPI";
+import OwnIcon from "@/components/OwnIcon";
+import OwnImage from "@/components/OwnImage";
 const My = () => {
   const [userInfo, setUserInfo] = useState({});
   const router = useRouter();
@@ -87,35 +89,35 @@ const My = () => {
             url: !zoneLength
               ? `my/createProfile`
               : `space/${account.data.account.mid}`,
-            iconUrl: `icons/32DP/space.png`,
+            iconUrl: `/icons/32DP/space.png`,
             title: !zoneLength ? "开通空间" : "我的空间",
             subTitle:
               account.data.account.role == 3 ? "创作者功能" : "完善资料后解锁",
           },
           {
             url: `streamerPosts/${account.data.account.mid}`,
-            iconUrl: "icons/32DP/myposts.png",
+            iconUrl: "/icons/32DP/myposts.png",
             title: "广场动态",
             subTitle:
               account.data.account.role == 3 ? "创作者功能" : "完善资料后解锁",
           },
           {
             url: `my/wechatWaitingToAdd`,
-            iconUrl: "icons/32DP/wechat.png",
+            iconUrl: "/icons/32DP/wechat.png",
             title: "待添加微信",
             subTitle:
               account.data.account.role == 3 ? "创作者功能" : "完善资料后解锁",
           },
           {
             url: `my/editprofile`,
-            iconUrl: "icons/32DP/editprofile.png",
+            iconUrl: "/icons/32DP/editprofile.png",
             title: "编辑资料",
             subTitle:
               account.data.account.role == 3 ? "创作者功能" : "完善资料后解锁",
           },
           {
             url: `my/refund/refundList`,
-            iconUrl: "icons/32DP/wallet.png",
+            iconUrl: "/icons/32DP/wallet.png",
             title: "退款审核",
             subTitle:
               account.data.account.role == 3 ? "创作者功能" : "完善资料后解锁",
@@ -126,7 +128,7 @@ const My = () => {
           currentOld = [
             {
               url: `my/streamerVerification/completeStreamerInformation`,
-              iconUrl: "icons/32DP/editprofile.png",
+              iconUrl: "/icons/32DP/editprofile.png",
               title: "完善资料",
               subTitle: "完善后解锁全部功能",
               status:
@@ -148,27 +150,27 @@ const My = () => {
       let currentOld = [
         {
           url: `my/wallet`,
-          iconUrl: "icons/32DP/wallet.png",
+          iconUrl: "/icons/32DP/wallet.png",
           title: "我的钱包",
         },
         {
           url: `my/unlockedWechat`,
-          iconUrl: "icons/32DP/wechat.png",
+          iconUrl: "/icons/32DP/wechat.png",
           title: "已解锁微信",
         },
         {
           url: `my/streamerVerification/joinEntrance`,
-          iconUrl: "icons/32DP/join.png",
+          iconUrl: "/icons/32DP/join.png",
           title: "申请入驻",
         },
         {
           url: `/messageDetail`,
-          iconUrl: "icons/32DP/contact.png",
+          iconUrl: "/icons/32DP/contact.png",
           title: "联系客服",
         },
         {
           url: `/my/addToHome`,
-          iconUrl: "icons/32DP/toScreen.png",
+          iconUrl: "/icons/32DP/toScreen.png",
           title: "添加到主屏幕",
         },
       ];
@@ -229,12 +231,9 @@ const My = () => {
         }}
       >
         <div className="flex items-center">
-          <Image
-            className="mr-2"
-            width={32}
-            src={`${process.env.NEXT_PUBLIC_WEB_ASSETS_URL}/${iconUrl}`}
-            placeholder=""
-          />
+          <div className="mr-2">
+            <OwnIcon className="w-[32px] h-[32px]" src={iconUrl} />
+          </div>
           <span className="text-base">{title}</span>
         </div>
         <div className={`flex items-center text-[#FFFFFF80]`}>
@@ -281,26 +280,20 @@ const My = () => {
             router.push("my/editUserProfile/selectUserProfileItem")
           }
         >
-          <Image
-            src={
-              process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/32DP/edit.png"
-            }
+          <OwnIcon
+            src="/icons/32DP/edit.png"
             width={32}
-            className="w-4 h-full"
-            placeholder=""
+            className="h-full w-full"
           />
         </div>
         <div
           className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full"
           onClick={() => router.push("my/setting")}
         >
-          <Image
-            src={
-              process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/32DP/setting.png"
-            }
+          <OwnIcon
+            src="/icons/32DP/setting.png"
             width={32}
-            className="w-4 h-full"
-            placeholder=""
+            className="h-full w-full"
           />
         </div>
       </div>
@@ -310,12 +303,15 @@ const My = () => {
           onClick={() => router.push("profile/" + userInfo.mid)}
         >
           <div className="flex items-center">
-            <Avatar
-              rounded-full
-              src={userInfo.avatar?.images[0].urls[0]}
-              className="mr-4"
-              style={{ "--size": "76px", "--border-radius": "50%" }}
-            />
+            <div className="mr-4">
+              <OwnImage
+                width="76px"
+                height="76px"
+                roundedFull
+                src={userInfo.avatar?.images[0].urls[0]}
+                className="rounded-full"
+              />
+            </div>
             <div>
               <Space align="center">
                 <p
@@ -327,27 +323,15 @@ const My = () => {
                   {userInfo.name}
                 </p>
                 {userInfo?.is_a_member === 1 && (
-                  <Image
-                    src={
-                      process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
-                      "/icons/vipbig.png"
-                    }
-                    width={32}
-                    height={32}
-                    placeholder=""
-                  />
+                  <OwnIcon src="/icons/vipbig.png" width={32} height={32} />
                 )}
               </Space>
               <div className="h-4 flex items-center text-xs bg-[#ffffff18] rounded-full px-2 py-2.5 mt-1 w-max">
-                <Image
-                  src={
-                    process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
-                    "/icons/info/ID.png"
-                  }
+                <OwnIcon
+                  src="/icons/info/ID.png"
                   width={14}
                   height={14}
                   className="w-4 h-full mr-1"
-                  placeholder=""
                 />
                 <span>{userInfo.user_id}</span>
               </div>
@@ -363,12 +347,15 @@ const My = () => {
       ) : (
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center">
-            <Avatar
-              rounded-full
-              src={userInfo.avatar?.images[0].urls[0]}
-              className="mr-4"
-              style={{ "--size": "76px", "--border-radius": "50%" }}
-            />
+            <div className="mr-4">
+              <OwnImage
+                width="76px"
+                height="76px"
+                roundedFull
+                src={userInfo.avatar?.images[0].urls[0]}
+                className="rounded-full"
+              />
+            </div>
             <div>
               <Space align="center">
                 <p
@@ -380,27 +367,15 @@ const My = () => {
                   {userInfo.name}
                 </p>
                 {userInfo?.is_a_member === 1 && (
-                  <Image
-                    src={
-                      process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
-                      "/icons/vipbig.png"
-                    }
-                    width={32}
-                    height={32}
-                    placeholder=""
-                  />
+                  <OwnIcon src="/icons/vipbig.png" width={32} height={32} />
                 )}
               </Space>
               <div className="h-4 flex items-center text-xs bg-[#ffffff18] rounded-full px-2 py-2.5 mt-1 w-max">
-                <Image
-                  src={
-                    process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
-                    "/icons/info/ID.png"
-                  }
+                <OwnIcon
+                  src="/icons/info/ID.png"
                   width={14}
                   height={14}
                   className="w-4 h-full mr-1"
-                  placeholder=""
                 />
                 <span>{userInfo.user_id}</span>
               </div>
diff --git a/app/my/refund/refundList/index.module.scss b/app/my/refund/refundList/index.module.scss
index 58e081a..b12519c 100644
--- a/app/my/refund/refundList/index.module.scss
+++ b/app/my/refund/refundList/index.module.scss
@@ -15,7 +15,7 @@
 }
 .customTabs>div>div:last-child>div:first-child::after{
   content: "";
-  background-image: url("https://filecdn01.tiefen.fun/web_app_public/icons/tabindicator.png");
+  background-image: url("https://filecdntx01.tiefen.fun/web_app_public/icons/tabindicator.png");
   height: 44px;
   background-size: cover;
   background-repeat: no-repeat;
diff --git a/app/my/streamerVerification/completeStreamerInformation/page.jsx b/app/my/streamerVerification/completeStreamerInformation/page.jsx
index e3c0a2c..3a00ad3 100644
--- a/app/my/streamerVerification/completeStreamerInformation/page.jsx
+++ b/app/my/streamerVerification/completeStreamerInformation/page.jsx
@@ -21,6 +21,8 @@ import {
   Image,
   Mask,
   SpinLoading,
+  Form,
+  Input,
 } from "antd-mobile";
 import { useRouter } from "next/navigation";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -90,27 +92,17 @@ const provinces = [
 export default function CompleteStreamerInformation() {
   const router = useRouter();
   const ref = useRef(null);
+  const [form] = Form.useForm();
   const [hadSubmited, setHadSubmited] = useState(false);
   const [frameImageUrl, setFrameImageUrl] = useState(null);
   const [isWaitingReview, setIsWaitingReview] = useState(false);
+  const [showWechatInput, setShowWechatInput] = useState(false);
   const [formData, setFormData] = useState({
-    wechatPrice: 0,
-    gender: [""],
-    age: [""],
-    height: [""],
-    weight: [""],
-    constellation: [""],
-    province: [""],
-    tags: [],
-    info: "",
-    autoResponse: "",
-    wechat: "",
-    wechatAddWay: 1,
-    fans: 0,
     imageAssets: [],
     displayImage: [],
     displayVideo: [],
   });
+
   const [spacePriceAble, setSpacePriceAble] = useState(false);
   // const [wechatAddWay, setWechatAddWay] = useState("0");
   const [data, setData] = useState({});
@@ -155,8 +147,8 @@ export default function CompleteStreamerInformation() {
         cover,
         shorts,
       } = data?.streamer;
-      setFormData((old) => ({
-        ...old,
+
+      const newFormData = {
         fans,
         wechatPrice: wechat_coin_price / 10,
         gender: [`${gender}`],
@@ -185,7 +177,9 @@ export default function CompleteStreamerInformation() {
             url: shorts?.videos[0]?.cover_urls[0],
           },
         ],
-      }));
+      };
+      setShowWechatInput(wechat_lock_type);
+      form.setFieldsValue(newFormData);
     }
   }, [data]);
   useEffect(() => {
@@ -308,42 +302,10 @@ export default function CompleteStreamerInformation() {
       setIsSubmitting(false);
     }
   };
-  const handSubmit = async (values) => {
+  const handleSubmit = async (values) => {
     const account = await get("account");
-    const {
-      fans,
-      gender,
-      wechatAddWay,
-      wechatPrice,
-      info,
-      age,
-      height,
-      weight,
-      constellation,
-      province,
-      autoResponse,
-      tags,
-      wechat,
-      imageAssets,
-      displayImage,
-      displayVideo,
-    } = values;
-    if (
-      !fans ||
-      !gender ||
-      //   !wechatAddWay ||
-      !wechatPrice ||
-      !info ||
-      !age ||
-      !height ||
-      !weight ||
-      !constellation ||
-      !province ||
-      !autoResponse ||
-      tags.length === 0 ||
-      displayImage.length === 0 ||
-      displayVideo.length === 0
-    ) {
+    const { imageAssets, displayImage, displayVideo } = formData;
+    if (displayImage.length === 0 || displayVideo.length === 0) {
       Toast.show({
         icon: "fail",
         content: "请完善信息后提交",
@@ -351,31 +313,6 @@ export default function CompleteStreamerInformation() {
       });
       return;
     }
-    if (isNaN(fans) || fans < 1) {
-      Toast.show({
-        icon: "fail",
-        content: "请输入有效的全网粉丝量（大于等于1的整数）",
-        position: "top",
-      });
-      return;
-    }
-    const price = parseInt(wechatPrice, 10);
-    if (isNaN(price) || price < 1) {
-      Toast.show({
-        icon: "fail",
-        content: "请输入有效的微信价格（大于等于1的整数）",
-        position: "top",
-      });
-      return;
-    }
-    if (wechatAddWay === 0 && wechat.trim() == "") {
-      Toast.show({
-        icon: "fail",
-        content: "请填写微信号",
-        position: "top",
-      });
-      return;
-    }
     //相册不得低于2张
     if (imageAssets.length < 2) {
       Toast.show({
@@ -424,6 +361,21 @@ export default function CompleteStreamerInformation() {
       setIsSubmitting(false);
       return;
     }
+    const {
+      gender,
+      wechat,
+      info,
+      age,
+      tags,
+      height,
+      weight,
+      constellation,
+      province,
+      wechatAddWay,
+      fans,
+      wechatPrice,
+      autoResponse,
+    } = values;
     //上传表单
     const body = {
       mid: account?.mid,
@@ -583,6 +535,7 @@ export default function CompleteStreamerInformation() {
       </div>
     );
   }
+  const messageEle = (message) => <p className="text-right">{message}</p>;
   return (
     <div>
       {/* 头部标题 */}
@@ -633,13 +586,38 @@ export default function CompleteStreamerInformation() {
             <span>{data?.name}</span>
           </div>
         </div>
-
-        <div className="mt-6">
-          <div className="flex justify-between items-center">
-            <p className="text-sm">
-              <span>性别</span>
-              <span className="text-[#f00]">*</span>
-            </p>
+        <Form
+          layout="vertical"
+          form={form}
+          onFinish={handleSubmit}
+          onFinishFailed={(error) => console.log(error)}
+          initialValues={formData}
+          // hasFeedback={false}
+          validateMessages={{
+            required: (name) => {
+              return <p className="text-right">{`请输入${name}`}</p>;
+            },
+          }}
+        >
+          <Form.Item
+            required
+            name="gender"
+            childElementPosition="right"
+            label={<span className="text-sm">性别</span>}
+            layout="horizontal"
+            trigger="onConfirm"
+            rules={[
+              {
+                required: true,
+                message: messageEle("请选择性别"),
+                // validator: (rule, value) => {
+                //   if (value.length === 0) {
+                //     return Promise.reject(messageEle("请选择性别"));
+                //   }
+                // },
+              },
+            ]}
+          >
             <Picker
               columns={[
                 [
@@ -647,10 +625,6 @@ export default function CompleteStreamerInformation() {
                   { label: "男", value: "0" },
                 ],
               ]}
-              value={formData.gender}
-              onConfirm={(v) => {
-                setFormData((old) => ({ ...old, gender: v }));
-              }}
             >
               {(items, { open }) => {
                 return (
@@ -660,9 +634,11 @@ export default function CompleteStreamerInformation() {
                     justify="center"
                     onClick={open}
                   >
-                    {items.every((item) => item === null)
-                      ? "未选择"
-                      : items.map((item) => item?.label ?? "未选择").join("")}
+                    <span className="text-sm">
+                      {items.every((item) => item === null)
+                        ? "未选择"
+                        : items.map((item) => item?.label ?? "未选择").join("")}
+                    </span>
                     <FontAwesomeIcon
                       icon={faSortDown}
                       style={{ maxWidth: "12px", marginBottom: 6 }}
@@ -672,21 +648,22 @@ export default function CompleteStreamerInformation() {
                 );
               }}
             </Picker>
-          </div>
-        </div>
-        <div className="mt-6">
-          <div className="flex justify-between items-center">
-            <p className="text-sm">
-              <span>年龄（岁）</span>
-              <span className="text-[#f00]">*</span>
-            </p>
-            <Picker
-              columns={[ages]}
-              value={formData.age}
-              onConfirm={(v) => {
-                setFormData((old) => ({ ...old, age: v }));
-              }}
-            >
+          </Form.Item>
+          <Form.Item
+            required
+            name="age"
+            trigger="onConfirm"
+            childElementPosition="right"
+            label={<span className="text-sm">年龄（岁）</span>}
+            layout="horizontal"
+            rules={[
+              {
+                required: true,
+                message: messageEle("请选择年龄"),
+              },
+            ]}
+          >
+            <Picker columns={[ages]}>
               {(items, { open }) => {
                 return (
                   <Space
@@ -695,9 +672,11 @@ export default function CompleteStreamerInformation() {
                     justify="center"
                     onClick={open}
                   >
-                    {items.every((item) => item === null)
-                      ? "未选择"
-                      : items.map((item) => item?.label ?? "未选择").join("")}
+                    <span className="text-sm">
+                      {items.every((item) => item === null)
+                        ? "未选择"
+                        : items.map((item) => item?.label ?? "未选择").join("")}
+                    </span>
                     <FontAwesomeIcon
                       icon={faSortDown}
                       style={{ maxWidth: "12px", marginBottom: 6 }}
@@ -707,21 +686,22 @@ export default function CompleteStreamerInformation() {
                 );
               }}
             </Picker>
-          </div>
-        </div>
-        <div className="mt-6">
-          <div className="flex justify-between items-center">
-            <p className="text-sm">
-              <span>身高（cm）</span>
-              <span className="text-[#f00]">*</span>
-            </p>
-            <Picker
-              columns={[heights]}
-              value={formData.height}
-              onConfirm={(v) => {
-                setFormData((old) => ({ ...old, height: v }));
-              }}
-            >
+          </Form.Item>
+          <Form.Item
+            required
+            name="height"
+            trigger="onConfirm"
+            childElementPosition="right"
+            label={<span className="text-sm">身高（cm）</span>}
+            layout="horizontal"
+            rules={[
+              {
+                required: true,
+                message: messageEle("请选择身高"),
+              },
+            ]}
+          >
+            <Picker columns={[heights]}>
               {(items, { open }) => {
                 return (
                   <Space
@@ -730,9 +710,11 @@ export default function CompleteStreamerInformation() {
                     justify="center"
                     onClick={open}
                   >
-                    {items.every((item) => item === null)
-                      ? "未选择"
-                      : items.map((item) => item?.label ?? "未选择").join("")}
+                    <span className="text-sm">
+                      {items.every((item) => item === null)
+                        ? "未选择"
+                        : items.map((item) => item?.label ?? "未选择").join("")}
+                    </span>
                     <FontAwesomeIcon
                       icon={faSortDown}
                       style={{ maxWidth: "12px", marginBottom: 6 }}
@@ -742,21 +724,22 @@ export default function CompleteStreamerInformation() {
                 );
               }}
             </Picker>
-          </div>
-        </div>
-        <div className="mt-6">
-          <div className="flex justify-between items-center">
-            <p className="text-sm">
-              <span>体重（kg）</span>
-              <span className="text-[#f00]">*</span>
-            </p>
-            <Picker
-              columns={[weights]}
-              value={formData.weight}
-              onConfirm={(v) => {
-                setFormData((old) => ({ ...old, weight: v }));
-              }}
-            >
+          </Form.Item>
+          <Form.Item
+            required
+            name="weight"
+            trigger="onConfirm"
+            childElementPosition="right"
+            label={<span className="text-sm">体重（kg）</span>}
+            layout="horizontal"
+            rules={[
+              {
+                required: true,
+                message: messageEle("请选择体重"),
+              },
+            ]}
+          >
+            <Picker columns={[weights]}>
               {(items, { open }) => {
                 return (
                   <Space
@@ -765,9 +748,11 @@ export default function CompleteStreamerInformation() {
                     justify="center"
                     onClick={open}
                   >
-                    {items.every((item) => item === null)
-                      ? "未选择"
-                      : items.map((item) => item?.label ?? "未选择").join("")}
+                    <span className="text-sm">
+                      {items.every((item) => item === null)
+                        ? "未选择"
+                        : items.map((item) => item?.label ?? "未选择").join("")}
+                    </span>
                     <FontAwesomeIcon
                       icon={faSortDown}
                       style={{ maxWidth: "12px", marginBottom: 6 }}
@@ -777,21 +762,22 @@ export default function CompleteStreamerInformation() {
                 );
               }}
             </Picker>
-          </div>
-        </div>
-        <div className="mt-6">
-          <div className="flex justify-between items-center">
-            <p className="text-sm">
-              <span>星座</span>
-              <span className="text-[#f00]">*</span>
-            </p>
-            <Picker
-              columns={[constellations]}
-              value={formData.constellation}
-              onConfirm={(v) => {
-                setFormData((old) => ({ ...old, constellation: v }));
-              }}
-            >
+          </Form.Item>
+          <Form.Item
+            required
+            trigger="onConfirm"
+            name="constellation"
+            childElementPosition="right"
+            label={<span className="text-sm">星座</span>}
+            layout="horizontal"
+            rules={[
+              {
+                required: true,
+                message: messageEle("请选择星座"),
+              },
+            ]}
+          >
+            <Picker columns={[constellations]}>
               {(items, { open }) => {
                 return (
                   <Space
@@ -800,9 +786,11 @@ export default function CompleteStreamerInformation() {
                     justify="center"
                     onClick={open}
                   >
-                    {items.every((item) => item === null)
-                      ? "未选择"
-                      : items.map((item) => item?.label ?? "未选择").join("")}
+                    <span className="text-sm">
+                      {items.every((item) => item === null)
+                        ? "未选择"
+                        : items.map((item) => item?.label ?? "未选择").join("")}
+                    </span>
                     <FontAwesomeIcon
                       icon={faSortDown}
                       style={{ maxWidth: "12px", marginBottom: 6 }}
@@ -812,21 +800,22 @@ export default function CompleteStreamerInformation() {
                 );
               }}
             </Picker>
-          </div>
-        </div>
-        <div className="mt-6">
-          <div className="flex justify-between items-center">
-            <p className="text-sm">
-              <span>所在地</span>
-              <span className="text-[#f00]">*</span>
-            </p>
-            <Picker
-              columns={[provinces]}
-              value={formData.province}
-              onConfirm={(v) => {
-                setFormData((old) => ({ ...old, province: v }));
-              }}
-            >
+          </Form.Item>
+          <Form.Item
+            required
+            trigger="onConfirm"
+            name="province"
+            childElementPosition="right"
+            label={<span className="text-sm">所在地</span>}
+            layout="horizontal"
+            rules={[
+              {
+                required: true,
+                message: messageEle("请选择所在地"),
+              },
+            ]}
+          >
+            <Picker columns={[provinces]}>
               {(items, { open }) => {
                 return (
                   <Space
@@ -835,9 +824,11 @@ export default function CompleteStreamerInformation() {
                     justify="center"
                     onClick={open}
                   >
-                    {items.every((item) => item === null)
-                      ? "未选择"
-                      : items.map((item) => item?.label ?? "未选择").join("")}
+                    <span className="text-sm">
+                      {items.every((item) => item === null)
+                        ? "未选择"
+                        : items.map((item) => item?.label ?? "未选择").join("")}
+                    </span>
                     <FontAwesomeIcon
                       icon={faSortDown}
                       style={{ maxWidth: "12px", marginBottom: 6 }}
@@ -847,17 +838,19 @@ export default function CompleteStreamerInformation() {
                 );
               }}
             </Picker>
-          </div>
-        </div>
-        <div className="mt-6">
-          <div className="flex justify-between items-center">
-            <p className="text-sm">
-              <span>添加标签</span>
-              <span className="text-[#f00]">*</span>
-            </p>
-            <div className="flex items-center"></div>
-          </div>
-          <div className="mt-2">
+          </Form.Item>
+          <Form.Item
+            required
+            name="tags"
+            label={<span className="text-sm">添加标签</span>}
+            layout="vertical"
+            rules={[
+              {
+                required: true,
+                message: messageEle("请添加标签"),
+              },
+            ]}
+          >
             <Selector
               options={fieldNamesOptions}
               fieldNames={{
@@ -867,18 +860,17 @@ export default function CompleteStreamerInformation() {
               }}
               // defaultValue={["1"]}
               multiple
-              onChange={(arr, extend) => {
-                if (arr.length >= 4) {
-                  Toast.show({
-                    content: "最多只能选择3个标签",
-                    position: "top",
-                  });
-                  return;
-                }
-                setFormData((old) => ({ ...old, tags: arr }));
-              }}
+              // onChange={(arr, extend) => {
+              //   if (arr.length >= 4) {
+              //     Toast.show({
+              //       content: "最多只能选择3个标签",
+              //       position: "top",
+              //     });
+              //     return;
+              //   }
+              //   setFormData((old) => ({ ...old, tags: arr }));
+              // }}
               showCheckMark={false}
-              value={formData.tags}
               style={{
                 "--border-radius": "100px",
                 "--border": "solid #ffffff80 1px",
@@ -889,23 +881,21 @@ export default function CompleteStreamerInformation() {
                 "--checked-color": "none",
               }}
             />
-          </div>
-        </div>
-        <div className="mt-6">
-          <div className="flex justify-between items-center">
-            <p className="text-sm">
-              <span>添加微信方式</span>
-              <span className="text-[#f00]">*</span>
-            </p>
-            <div className="flex items-center"></div>
-          </div>
-          <Space direction="vertical" block>
-            <Radio.Group
-              value={formData.wechatAddWay}
-              onChange={(value) =>
-                setFormData((old) => ({ ...old, wechatAddWay: value }))
-              }
-            >
+          </Form.Item>
+          <Form.Item
+            required
+            name="wechatAddWay"
+            label={<span className="text-sm">添加微信方式</span>}
+            layout="vertical"
+            // trigger="onConfirm"
+            rules={[
+              {
+                required: true,
+                message: messageEle("请添加微信方式"),
+              },
+            ]}
+          >
+            <Radio.Group onChange={setShowWechatInput}>
               <ul>
                 {superSingles.map((item) => (
                   <Fragment key={item.key}>
@@ -914,245 +904,255 @@ export default function CompleteStreamerInformation() {
                 ))}
               </ul>
             </Radio.Group>
-            {formData.wechatAddWay == 0 && (
-              <div className="mt-2 px-4 h-12 py-3 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center">
-                <div>
-                  <OwnInput
-                    value={formData.wechat}
-                    placeholder="对方付费购买后展示"
-                    onChange={(value) =>
-                      setFormData((old) => ({ ...old, wechat: value }))
-                    }
-                  />
-                </div>
-              </div>
-            )}
-          </Space>
-        </div>
-        <div className="mt-4">
-          <div className="flex justify-between items-center">
-            <p className="text-sm">
-              <span>全网粉丝量（万）</span>
-              <span className="text-[#f00]">*</span>
-            </p>
-          </div>
-          <div className="mt-2 px-4 py-3 h-12 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center">
+          </Form.Item>
+
+          <Form.Item
+            required
+            style={{
+              display: showWechatInput === 0 ? "block" : "none",
+            }}
+            label={<span className="text-sm">微信帐号</span>}
+            layout="vertical"
+            name="wechat"
+            rules={[
+              {
+                required: true,
+                message: messageEle("请填写正确的微信"),
+                pattern: /^[a-zA-Z0-9_-]+$/,
+              },
+            ]}
+          >
+            <OwnInput
+              placeholder="对方付费购买后展示"
+              inputClassName="mt-2 px-4 h-12 py-3 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center"
+            />
+          </Form.Item>
+          <Form.Item
+            required
+            name="fans"
+            layout="vertical"
+            label={<span className="text-sm">全网粉丝量（万）</span>}
+            rules={[
+              {
+                required: true,
+                message: messageEle(
+                  "请输入有效的全网粉丝量（大于等于1的整数）"
+                ),
+                // pattern: /^[1-9]+(\.[0-9]{1,2})?$/,
+                pattern: /^[1-9]\d*$/,
+              },
+            ]}
+          >
             <OwnInput
               type="number"
               placeholder="请输入真实有效数据"
-              value={formData.fans}
-              onChange={(value) => {
-                setFormData((old) => ({ ...old, fans: value }));
-              }}
+              inputClassName="mt-2 px-4 py-3 h-12 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center"
             />
-          </div>
-        </div>
-        <div className="mt-6">
-          <div className="flex justify-between items-center">
-            <p className="text-sm">
-              <span>加微信价格（元）</span>
-              <span className="text-[#f00]">*</span>
-            </p>
-            <p className="text-[#ffffffae] text-xs"></p>
-          </div>
-          <div className="mt-2 px-4 py-3 h-12 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center">
-            <div className="flex items-center">
-              <span className="mr-1 text-[#ffffffae] text-sm">¥</span>
-              <OwnInput
-                id="addWeChatPrice"
-                type="number"
-                value={formData.wechatPrice}
-                onChange={(value) =>
-                  setFormData((old) => ({ ...old, wechatPrice: value }))
-                }
-              />
+          </Form.Item>
+          <Form.Item
+            required
+            layout="vertical"
+            label={<span className="text-sm">加微信价格（元）</span>}
+            rules={[
+              {
+                required: true,
+                message: messageEle("请输入有效的微信价格（大于等于1的整数）"),
+                pattern: /^[1-9]\d*$/,
+              },
+            ]}
+          >
+            <div className="mt-2 px-4 py-3 h-12 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center">
+              <div className="flex items-center">
+                <span className="mr-1 text-[#ffffffae] text-sm">¥</span>
+                <Form.Item name="wechatPrice">
+                  <OwnInput id="addWeChatPrice" type="number" />
+                </Form.Item>
+              </div>
+              <label
+                htmlFor="addWeChatPrice"
+                className="text-[#ffffffae] text-xs whitespace-nowrap"
+                onClick={() => setSpacePriceAble(true)}
+              >
+                点击编辑
+              </label>
             </div>
-            <label
-              htmlFor="addWeChatPrice"
-              className="text-[#ffffffae] text-xs whitespace-nowrap"
-              onClick={() => setSpacePriceAble(true)}
-            >
-              点击编辑
-            </label>
-          </div>
-        </div>
+          </Form.Item>
 
-        <div className="mt-6">
-          <div className="flex justify-between items-center">
-            <p className="text-sm">
-              <span>个性签名</span>
-              <span className="text-[#f00]">*</span>
-            </p>
-            <p className="text-[#ffffffae] text-xs"></p>
-          </div>
-          <div className="mt-2 px-4 py-3 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center">
+          <Form.Item
+            required
+            name="info"
+            layout="vertical"
+            label="个性签名"
+            rules={[
+              {
+                required: true,
+                message: messageEle("请填写个性签名"),
+              },
+            ]}
+          >
             <TextArea
               style={{ "--font-size": `16px` }}
-              value={formData.info}
               placeholder="点此输入，文案将在“主页”展示"
-              onChange={(value) =>
-                setFormData((old) => ({ ...old, info: value }))
-              }
+              className="mt-2 px-4 py-3 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center"
             />
-          </div>
-        </div>
-        <div className="mt-6">
-          <div className="flex justify-between items-center">
-            <p className="text-sm">
-              <span>私信自动回复</span>
-              <span className="text-[#f00]">*</span>
-            </p>
-            <p className="text-[#ffffffae] text-xs"></p>
-          </div>
-          <div className="mt-2 px-4 py-3 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center">
+          </Form.Item>
+          <Form.Item
+            name="autoResponse"
+            layout="vertical"
+            label="私信自动回复"
+            rules={[
+              {
+                required: true,
+                message: messageEle("请填写私信自动回复"),
+              },
+            ]}
+          >
             <TextArea
               style={{ "--font-size": `16px` }}
-              value={formData.autoResponse}
               placeholder="文案将自动发送给点开私信的用户"
-              onChange={(value) =>
-                setFormData((old) => ({ ...old, autoResponse: value }))
-              }
+              className="mt-2 px-4 py-3 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center"
             />
-          </div>
-        </div>
-        <div className="mt-6">
-          <div className="flex justify-between items-center">
-            <p className="text-sm">
-              <span>照片墙</span>
-              <span className="text-[#f00]">*</span>
-            </p>
-            <p className="text-[#ffffffae] text-xs"></p>
-          </div>
-          <div className=" my-2 py-4 bg-[#FFFFFF1A] px-3 rounded-2xl">
-            <ul>
-              <li className="flex justify-between items-center">
-                <p className="text-base font-medium">
-                  <span className="text-[#F53030]">*</span>
-                  封面图
-                </p>
-                <label htmlFor="uploadBtn1">
-                  <div className="flex items-center">
-                    {formData?.displayImage[0] ? (
-                      <Image
-                        width={36}
-                        height={36}
-                        className="rounded-lg"
-                        src={formData.displayImage[0]?.url}
-                        fit="cover"
-                      />
-                    ) : (
-                      <span className="text-xs text-[#FFFFFF80] font-medium whitespace-nowrap">
-                        请尽量选择横屏照片
-                      </span>
-                    )}
-                    <div className="ml-2">
-                      <FontAwesomeIcon
-                        icon={faAngleRight}
-                        style={{ maxWidth: "12px" }}
-                        size="xl"
-                      />
-                    </div>
-                  </div>
-                </label>
-                <div className="hidden">
-                  <input
-                    type="file"
-                    accept="image/png, image/jpeg, image/jpg"
-                    ref={ref}
-                    id="uploadBtn1"
-                    onChange={(e) => handleUploadImage(e, 1)}
-                  />
-                </div>
-              </li>
-              <Divider />
-              <li className="flex justify-between items-center">
-                <p className="text-base font-medium">
-                  <span className="text-[#F53030]">*</span>
-                  展示视频
-                </p>
-                <label htmlFor="uploadBtn2">
-                  <div
-                    // onClick={() => pickDisPlayImage()}
-                    className="flex items-center"
-                  >
-                    {formData?.displayVideo[0] ? (
-                      <Image
-                        width={36}
-                        height={36}
-                        className="rounded-lg"
-                        src={frameImageUrl || formData.displayVideo[0]?.url}
-                        fit="cover"
-                      />
-                    ) : (
-                      <span className="text-xs text-[#FFFFFF80] font-medium whitespace-nowrap">
-                        请尽量选择竖屏视频
-                      </span>
-                    )}
-                    <div className="ml-2">
-                      <FontAwesomeIcon
-                        icon={faAngleRight}
-                        style={{ maxWidth: "12px" }}
-                        size="xl"
-                      />
-                    </div>
-                  </div>
-                </label>
+          </Form.Item>
 
-                <div className="hidden">
-                  <input
-                    type="file"
-                    accept="video/*"
-                    ref={ref}
-                    id="uploadBtn2"
-                    onChange={(e) => handleUploadImage(e, 2)}
-                  />
-                </div>
-              </li>
-              <Divider />
-              <li>
-                <div className="flex justify-between items-center">
+          <Form.Item>
+            <div className="flex justify-between items-center">
+              <p className="text-sm">
+                <span>照片墙</span>
+                <span className="text-[#f00]">*</span>
+              </p>
+              <p className="text-[#ffffffae] text-xs"></p>
+            </div>
+            <div className=" my-2 py-4 bg-[#FFFFFF1A] px-3 rounded-2xl">
+              <ul>
+                <li className="flex justify-between items-center">
                   <p className="text-base font-medium">
                     <span className="text-[#F53030]">*</span>
-                    相册
+                    封面图
                   </p>
-                  <div
-                  // onClick={() => pickDisPlayImage()}
-                  >
-                    <span className="text-xs text-[#FFFFFF80] font-medium">
-                      请上传2～9张照片
-                    </span>
+                  <label htmlFor="uploadBtn1">
+                    <div className="flex items-center">
+                      {formData?.displayImage[0] ? (
+                        <Image
+                          width={36}
+                          height={36}
+                          className="rounded-lg"
+                          src={formData.displayImage[0]?.url}
+                          fit="cover"
+                        />
+                      ) : (
+                        <span className="text-xs text-[#FFFFFF80] font-medium whitespace-nowrap">
+                          请尽量选择横屏照片
+                        </span>
+                      )}
+                      <div className="ml-2">
+                        <FontAwesomeIcon
+                          icon={faAngleRight}
+                          style={{ maxWidth: "12px" }}
+                          size="xl"
+                        />
+                      </div>
+                    </div>
+                  </label>
+                  <div className="hidden">
+                    <input
+                      type="file"
+                      accept="image/png, image/jpeg, image/jpg"
+                      ref={ref}
+                      id="uploadBtn1"
+                      onChange={(e) => handleUploadImage(e, 1)}
+                    />
                   </div>
-                </div>
-                <div className="mt-2">
-                  <UploadImgs
-                    type={1}
-                    existImages={oldPhotos}
-                    assets={formData.imageAssets}
-                    getImgs={(imgs) => {
-                      setFormData((old) => ({ ...old, imageAssets: imgs }));
-                    }}
-                  />
-                </div>
-              </li>
-            </ul>
-          </div>
-        </div>
+                </li>
+                <Divider />
+                <li className="flex justify-between items-center">
+                  <p className="text-base font-medium">
+                    <span className="text-[#F53030]">*</span>
+                    展示视频
+                  </p>
+                  <label htmlFor="uploadBtn2">
+                    <div
+                      // onClick={() => pickDisPlayImage()}
+                      className="flex items-center"
+                    >
+                      {formData?.displayVideo[0] ? (
+                        <Image
+                          width={36}
+                          height={36}
+                          className="rounded-lg"
+                          src={frameImageUrl || formData.displayVideo[0]?.url}
+                          fit="cover"
+                        />
+                      ) : (
+                        <span className="text-xs text-[#FFFFFF80] font-medium whitespace-nowrap">
+                          请尽量选择竖屏视频
+                        </span>
+                      )}
+                      <div className="ml-2">
+                        <FontAwesomeIcon
+                          icon={faAngleRight}
+                          style={{ maxWidth: "12px" }}
+                          size="xl"
+                        />
+                      </div>
+                    </div>
+                  </label>
 
-        <div className="mt-10 flex justify-center">
-          <Button
-            size="middle"
-            shape="rounded"
-            style={{
-              "--background-color": "#FF669E",
-              paddingLeft: "32px",
-              paddingRight: "32px",
-            }}
-            disabled={isSubmitting}
-            onClick={() => handSubmit(formData)}
-          >
-            {isSubmitting ? "正在提交..." : "提交"}
-          </Button>
-        </div>
+                  <div className="hidden">
+                    <input
+                      type="file"
+                      accept="video/*"
+                      ref={ref}
+                      id="uploadBtn2"
+                      onChange={(e) => handleUploadImage(e, 2)}
+                    />
+                  </div>
+                </li>
+                <Divider />
+                <li>
+                  <div className="flex justify-between items-center">
+                    <p className="text-base font-medium">
+                      <span className="text-[#F53030]">*</span>
+                      相册
+                    </p>
+                    <div
+                    // onClick={() => pickDisPlayImage()}
+                    >
+                      <span className="text-xs text-[#FFFFFF80] font-medium">
+                        请上传2～9张照片
+                      </span>
+                    </div>
+                  </div>
+                  <div className="mt-2">
+                    <UploadImgs
+                      type={1}
+                      existImages={oldPhotos}
+                      assets={formData.imageAssets}
+                      getImgs={(imgs) => {
+                        setFormData((old) => ({ ...old, imageAssets: imgs }));
+                      }}
+                    />
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </Form.Item>
+          <Form.Item label={null} className="mt-10 flex justify-center">
+            <Button
+              size="middle"
+              shape="rounded"
+              style={{
+                "--background-color": "#FF669E",
+                paddingLeft: "32px",
+                paddingRight: "32px",
+              }}
+              type="primary"
+              htmlType="submit"
+              disabled={isSubmitting}
+            >
+              {isSubmitting ? "正在提交..." : "提交"}
+            </Button>
+          </Form.Item>
+        </Form>
       </div>
       <Mask visible={isSubmitting}>
         <div className="w-full h-screen flex justify-center items-center">
diff --git a/app/my/streamerVerification/joinEntrance/page.jsx b/app/my/streamerVerification/joinEntrance/page.jsx
index 5468e85..400b240 100644
--- a/app/my/streamerVerification/joinEntrance/page.jsx
+++ b/app/my/streamerVerification/joinEntrance/page.jsx
@@ -78,14 +78,12 @@ export default function JoinEntrance() {
       </div>
       {/* 内容 */}
       <div className="h-screen relative">
-        <div className="absolute inset-x-0 bottom-24 top-24 flex flex-col items-center justify-center gap-12">
+        <div className="mt-20 flex flex-col items-center justify-center gap-6">
           <div
             className="max-w-80"
             onClick={() =>
               (streamerState?.basic_status === 2 ||
                 streamerState?.basic_status === 4) &&
-              (streamerState?.details_status === 2 ||
-                streamerState?.details_status === 4) &&
               router.push("joinStreamer")
             }
           >
@@ -93,10 +91,10 @@ export default function JoinEntrance() {
               src={
                 process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
                 `/images/${
-                  streamerState?.basic_status === 1 &&
-                  streamerState?.details_status === 1
-                    ? "streamerJoined"
-                    : "streamerJoin"
+                  streamerState?.basic_status === 2 ||
+                  streamerState?.basic_status === 4
+                    ? "streamerJoin"
+                    : "streamerJoined"
                 }.png`
               }
               placeholder=""
diff --git a/app/my/wechatWaitingToAdd/index.module.scss b/app/my/wechatWaitingToAdd/index.module.scss
index 58e081a..b12519c 100644
--- a/app/my/wechatWaitingToAdd/index.module.scss
+++ b/app/my/wechatWaitingToAdd/index.module.scss
@@ -15,7 +15,7 @@
 }
 .customTabs>div>div:last-child>div:first-child::after{
   content: "";
-  background-image: url("https://filecdn01.tiefen.fun/web_app_public/icons/tabindicator.png");
+  background-image: url("https://filecdntx01.tiefen.fun/web_app_public/icons/tabindicator.png");
   height: 44px;
   background-size: cover;
   background-repeat: no-repeat;
diff --git a/app/noticeDetail/components/MessageList/index.jsx b/app/noticeDetail/components/MessageList/index.jsx
index eb71828..8314214 100644
--- a/app/noticeDetail/components/MessageList/index.jsx
+++ b/app/noticeDetail/components/MessageList/index.jsx
@@ -11,7 +11,8 @@ import requireAPI from "@/utils/requireAPI";
 import { connect } from "react-redux";
 import { changeNoticeCount } from "@/store/actions";
 import { Image, Badge, Toast } from "antd-mobile";
-const MessageList = ({ mid, changeNoticeCount, refInstance }) => {
+import OwnImage from "@/components/OwnImage";
+const MessageList = ({ mid, changeNoticeCount, refInstance, noticeCount }) => {
   const router = useRouter();
   const [data, setData] = useState([]);
   const [scollNotice, setScollNotice] = useState("");
@@ -66,6 +67,7 @@ const MessageList = ({ mid, changeNoticeCount, refInstance }) => {
           });
           return;
         }
+        changeNoticeCount(0);
       } catch (error) {
         console.error(error);
       }
@@ -79,7 +81,7 @@ const MessageList = ({ mid, changeNoticeCount, refInstance }) => {
 
     getData();
     getActiveNotice();
-  }, []);
+  }, [noticeCount]);
   const getData = async () => {
     try {
       const body = {
@@ -104,9 +106,6 @@ const MessageList = ({ mid, changeNoticeCount, refInstance }) => {
         return;
       }
       const noticeObj = _data.data.result;
-      changeNoticeCount(_data.data.total);
-      // console.log("noticeObjNum", noticeObj);
-
       setData(noticeObj);
       setInfoItems((old) => {
         const newInfoItems = [...old];
@@ -163,15 +162,13 @@ const MessageList = ({ mid, changeNoticeCount, refInstance }) => {
         }
         className="flex flex-row items-center py-4 mb-2 rounded-xl bg-[#ffffff1a] gap-3 px-4"
       >
-        <div className="">
-          <Image
-            width={54}
-            height={54}
-            className="rounded-full"
-            src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL + icon}
-            fit="cover"
-          />
-        </div>
+        <OwnImage
+          width={54}
+          height={54}
+          className="rounded-full"
+          src={icon}
+          fit="cover"
+        />
         <div className="flex flex-row justify-between items-center flex-1">
           <div className="flex flex-col">
             <div className="flex flex-row items-center mb-2">
@@ -219,7 +216,7 @@ const MessageList = ({ mid, changeNoticeCount, refInstance }) => {
           className="flex flex-row items-center py-4 mb-2 rounded-xl"
         >
           <div className="px-4">
-            <Image
+            <OwnImage
               width={36}
               height={36}
               className="rounded-full"
@@ -248,11 +245,15 @@ const MessageList = ({ mid, changeNoticeCount, refInstance }) => {
     </div>
   );
 };
-
+const mapStateToProps = ({ reducer }) => {
+  return {
+    noticeCount: reducer.noticeCount,
+  };
+};
 const mapDispatchToProps = {
   changeNoticeCount,
 };
-const Component = connect(null, mapDispatchToProps)(MessageList);
+const Component = connect(mapStateToProps, mapDispatchToProps)(MessageList);
 export default forwardRef((props, ref) => (
   <Component {...props} refInstance={ref} />
 ));
diff --git a/app/noticeDetail/components/NoticeItem/index.jsx b/app/noticeDetail/components/NoticeItem/index.jsx
index b88f0a3..5c96a48 100644
--- a/app/noticeDetail/components/NoticeItem/index.jsx
+++ b/app/noticeDetail/components/NoticeItem/index.jsx
@@ -29,7 +29,9 @@ export default function NoticeItem({ navigation, leftIcon, hasLink, data }) {
               </div>
               <p className="text-lg font-medium mr-2 ">{data?.title}</p>
             </div>
-            <p className="text-base font-medium my-2">{data?.message}</p>
+            <pre className="text-base font-medium my-2 whitespace-pre-wrap">
+              {data?.message}
+            </pre>
             {/* 链接跳转 */}
             {!!data?.hyperlinks && (
               <div
diff --git a/app/space/setting/spaceMember/index.module.scss b/app/space/setting/spaceMember/index.module.scss
index 58e081a..b12519c 100644
--- a/app/space/setting/spaceMember/index.module.scss
+++ b/app/space/setting/spaceMember/index.module.scss
@@ -15,7 +15,7 @@
 }
 .customTabs>div>div:last-child>div:first-child::after{
   content: "";
-  background-image: url("https://filecdn01.tiefen.fun/web_app_public/icons/tabindicator.png");
+  background-image: url("https://filecdntx01.tiefen.fun/web_app_public/icons/tabindicator.png");
   height: 44px;
   background-size: cover;
   background-repeat: no-repeat;
diff --git a/components/AddToHome/index.jsx b/components/AddToHome/index.jsx
index f791cd4..10d31fe 100644
--- a/components/AddToHome/index.jsx
+++ b/components/AddToHome/index.jsx
@@ -24,7 +24,10 @@ export default function AddToHome() {
               fit="cover"
               className="rounded-md mr-3"
               // src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/nodata.png"}
-              src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/images/icon.png"}
+              src={
+                process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
+                "/images/icon_border.png"
+              }
               placeholder=""
               width={46}
               height={46}
diff --git a/components/BottomNav/index.js b/components/BottomNav/index.js
index b91b7cb..602885c 100644
--- a/components/BottomNav/index.js
+++ b/components/BottomNav/index.js
@@ -9,7 +9,7 @@ import { changeNoticeCount, changeInviter } from "@/store/actions";
 import { connect } from "react-redux";
 import { get } from "@/utils/storeInfo";
 import requireAPI from "@/utils/requireAPI";
-import { ErrorBoundary } from "react-error-boundary";
+import OwnIcon from "../OwnIcon";
 function BottomNav({ changeNoticeCount, changeInviter, noticeCount }) {
   const searchParams = useSearchParams();
   const pathname = usePathname();
@@ -37,12 +37,12 @@ function BottomNav({ changeNoticeCount, changeInviter, noticeCount }) {
         if (_data.ret === -1) {
           return;
         }
-        changeNoticeCount(_data.data.total);
+        if (!noticeCount) changeNoticeCount(_data.data.total);
       } catch (error) {}
     };
     getDtata();
     return () => {};
-  }, []);
+  }, [noticeCount]);
   const setRouteActive = (value) => {
     router.replace(value);
   };
@@ -50,80 +50,36 @@ function BottomNav({ changeNoticeCount, changeInviter, noticeCount }) {
     {
       key: "/",
       title: "广场",
-      icon: (
-        <div className="w-8 h-8">
-          <Image
-            placeholder=""
-            src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/postblur.png"}
-          />
-        </div>
-      ),
-      activeIcon: (
-        <div className="w-8 h-8">
-          <Image
-            placeholder=""
-            src={
-              process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/postfocus.png"
-            }
-          />
-        </div>
-      ),
+      icon: <OwnIcon className="w-8 h-8" src="/icons/postblur.png" />,
+      activeIcon: <OwnIcon className="w-8 h-8" src="/icons/postfocus.png" />,
     },
     {
       key: "/space",
       title: "空间",
-      icon: (
-        <div className="w-8 h-8">
-          <Image
-            placeholder=""
-            src={
-              process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/space_blur.png"
-            }
-          />
-        </div>
-      ),
-      activeIcon: (
-        <div className="w-8 h-8">
-          <Image
-            placeholder=""
-            src={
-              process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/space_focus.png"
-            }
-          />
-        </div>
-      ),
+      icon: <OwnIcon className="w-8 h-8" src="/icons/space_blur.png" />,
+      activeIcon: <OwnIcon className="w-8 h-8" src="/icons/space_focus.png" />,
     },
     {
       key: "/noticeDetail",
       title: "消息",
       icon: (
-        <div className="w-8 h-8 relative">
-          <Image
-            placeholder=""
-            src={
-              process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/streamblur.png"
-            }
-          />
+        <div className="relative">
+          <OwnIcon className="w-8 h-8" src="/icons/streamblur.png" />
           {!!noticeCount && (
             <Badge
               content={noticeCount > 99 ? "+99" : noticeCount}
-              className="absolute top-0 right-1"
+              className="absolute top-0 right-0 z-10"
             />
           )}
         </div>
       ),
       activeIcon: (
-        <div className="w-8 h-8 relative">
-          <Image
-            placeholder=""
-            src={
-              process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/streamfocus.png"
-            }
-          />
+        <div className="relative">
+          <OwnIcon className="w-8 h-8" src="/icons/streamfocus.png" />
           {!!noticeCount && (
             <Badge
               content={noticeCount > 99 ? "+99" : noticeCount}
-              className="absolute top-0 right-1"
+              className="absolute top-0 right-0 z-10"
             />
           )}
         </div>
@@ -132,22 +88,8 @@ function BottomNav({ changeNoticeCount, changeInviter, noticeCount }) {
     {
       key: "/my",
       title: "我的",
-      icon: (
-        <div className="w-8 h-8">
-          <Image
-            placeholder=""
-            src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/myblur.png"}
-          />
-        </div>
-      ),
-      activeIcon: (
-        <div className="w-8 h-8">
-          <Image
-            placeholder=""
-            src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/myfocus.png"}
-          />
-        </div>
-      ),
+      icon: <OwnIcon className="w-8 h-8" src="/icons/myblur.png" />,
+      activeIcon: <OwnIcon className="w-8 h-8" src="/icons/myfocus.png" />,
     },
   ];
   const checkPath = () => {
diff --git a/components/OwnIcon/index.jsx b/components/OwnIcon/index.jsx
new file mode 100644
index 0000000..1790fb0
--- /dev/null
+++ b/components/OwnIcon/index.jsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { Image } from "antd-mobile";
+export default function OwnIcon({
+  src,
+  width = "100%",
+  height = "100%",
+  className,
+  outClassName,
+  imageClassName,
+}) {
+  return (
+    <div
+      className={`flex flex-col justify-center items-center relative ${outClassName}`}
+    >
+      <div className={`w-12 h-12 ${className} z-[0]`}>
+        <Image
+          height={height}
+          width={width}
+          fit="cover"
+          className={imageClassName}
+          src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL + src}
+          // placeholder=""
+          fallback={
+            <div className="w-full h-full bg-gray-700 rounded-full absolute top-0 scale-75 z-0 animate-pulse" />
+          }
+          placeholder={
+            <div className="w-full h-full bg-gray-700 rounded-full absolute top-0 scale-75 z-0 animate-pulse" />
+          }
+        />
+        <div className="w-full h-full bg-transparent absolute top-0 z-20" />
+      </div>
+    </div>
+  );
+}
diff --git a/components/OwnImage/index.jsx b/components/OwnImage/index.jsx
new file mode 100644
index 0000000..7c222c5
--- /dev/null
+++ b/components/OwnImage/index.jsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { Image } from "antd-mobile";
+export default function OwnImage({
+  src,
+  width = "100%",
+  height = "100%",
+  className,
+  roundedFull,
+  ...others
+}) {
+  return (
+    <div className="flex flex-col justify-center items-center relative">
+      <div className={`${className}`}>
+        <Image
+          height={height}
+          width={width}
+          fit="cover"
+          src={src}
+          className={roundedFull ? "rounded-full" : ""}
+          // placeholder=""
+          fallback={
+            <div className="w-full h-full bg-gray-500  absolute top-0 z-0 animate-pulse" />
+          }
+          placeholder={
+            <div className="w-full h-full bg-gray-700 absolute top-0 z-0 animate-pulse" />
+          }
+          {...others}
+        />
+        <div className="w-full h-full bg-transparent absolute top-0 z-20" />
+      </div>
+    </div>
+  );
+}
diff --git a/components/OwnInput/index.js b/components/OwnInput/index.js
index d8e5550..12a2bba 100644
--- a/components/OwnInput/index.js
+++ b/components/OwnInput/index.js
@@ -5,7 +5,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faClose } from "@fortawesome/free-solid-svg-icons";
 // import styles from "./index.module.scss";
 export default function OwnInput({
-  value,
   onChange,
   type = "text",
   name,
@@ -16,21 +15,22 @@ export default function OwnInput({
   inputClassName = "",
   id,
   maxLength = 999,
+  ...other
 }) {
   return (
     <div className={`flex flex-1 relative ${className}`}>
       <input
+        {...other}
         id={id}
         placeholder={placeholder}
         disabled={disabled}
         name={name}
         type={type}
         maxLength={maxLength}
-        onChange={(e) => onChange(e.target?.value)}
-        value={value}
+        onChange={(e) => onChange && onChange(e.target?.value)}
         className={`w-full placeholder:text-[#FFFFFF80] text-[16px] focus:text-[16px] ${inputClassName}`}
       />
-      {clearable && value != "" && (
+      {clearable && other?.value != "" && (
         <div className="w-4 h-4 absolute right-2 top-[2px] flex justify-center items-center bg-[#ffffff33] p-1 rounded-full">
           <FontAwesomeIcon
             color="#ffffff40"
diff --git a/components/Photos/index.js b/components/Photos/index.js
index b7346de..9f81eb1 100644
--- a/components/Photos/index.js
+++ b/components/Photos/index.js
@@ -1,14 +1,16 @@
 "use client";
 
 import React, { useEffect, useState, useRef } from "react";
-import { Image, ImageViewer, Dialog } from "antd-mobile";
+import { ImageViewer } from "antd-mobile";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faAngleUp, faClose } from "@fortawesome/free-solid-svg-icons";
+import { faAngleUp } from "@fortawesome/free-solid-svg-icons";
 import { useRouter } from "next/navigation";
 import baseRequest from "@/utils/baseRequest";
 import { handleShowVideo } from "@/utils/tools/handleFuns";
+import OwnImage from "../OwnImage";
 // import dynamic from 'next/dynamic'
 import ImagesMask from "@/components/ImagesMask";
+import OwnIcon from "../OwnIcon";
 // const ImagesMask = dynamic(() =>
 // import('@/components/ImagesMask'), { ssr: false }
 // )
@@ -24,7 +26,6 @@ export default function Photos({
   const [seeAllPhotos, setSeeAllPhotos] = useState(false);
   const [currentPhotos, setCurrentPhotos] = useState([]);
   const [photos, setPhotos] = useState([]);
-  const [visible, setVisible] = useState(false);
   const currentIndex = useRef();
   const swiper = useRef(null);
   const imagesMaskRef = useRef(null);
@@ -269,11 +270,11 @@ export default function Photos({
                     currentPhotos.length > 1 ? "h-[24vw]" : ""
                   }`}
                 >
-                  <Image
+                  <OwnImage
                     // lazy={true}
-                    placeholder={
-                      <div className="w-full min-h-[24vw] bg-[#1d1d1d] rounded"></div>
-                    }
+                    // placeholder={
+                    //   <div className="w-full min-h-[24vw] bg-[#1d1d1d] rounded"></div>
+                    // }
                     width={
                       currentPhotos.length > 1
                         ? "24vw"
@@ -306,16 +307,11 @@ export default function Photos({
               }
               {item?.mp4 && (
                 <div className="absolute top-0 w-full h-full rounded flex justify-center items-center">
-                  <Image
-                    className=""
-                    width={98}
-                    height={98}
-                    src={
-                      process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/play.png"
-                    }
-                    placeholder={
-                      <div className="w-full h-full min-h-96 bg-[#1d1d1d] rounded"></div>
-                    }
+                  <OwnIcon
+                    width={68}
+                    height={68}
+                    imageClassName="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+                    src="/icons/play.png"
                   />
                 </div>
               )}
diff --git a/components/PostItem/index.js b/components/PostItem/index.js
index 7e01aac..f316d1e 100644
--- a/components/PostItem/index.js
+++ b/components/PostItem/index.js
@@ -4,7 +4,9 @@ import React, { useEffect, useState, useMemo, useCallback } from "react";
 import Photos from "../Photos";
 import { useRouter } from "next/navigation";
 import PaySpacePost from "../PaySpacePost";
-import { Image, Popover, Divider, Toast } from "antd-mobile";
+import { Popover, Toast } from "antd-mobile";
+import OwnImage from "../OwnImage";
+import OwnIcon from "../OwnIcon";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
 import { handleFollow, thumbsUp, handleBlock } from "@/api/public";
@@ -144,11 +146,7 @@ export default function PostItem({
   return (
     <div>
       {type == "space" && data?.is_headed === 1 && (
-        <Image
-          src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/images/top_post.png"}
-          width={76}
-          className="mb-2"
-        />
+        <OwnIcon src="/images/top_post.png" width={76} outClassName="mb-2" />
       )}
       <div className="flex">
         <div
@@ -157,13 +155,12 @@ export default function PostItem({
             router.push("/profile/" + data.mid);
           }}
         >
-          <Image
+          <OwnImage
             className="flex-none w-8 h-8 rounded-full mr-2"
-            fit="cover"
             width={"2rem"}
             height={"2rem"}
+            roundedFull
             src={data.streamer_ext?.avatar.images[0].urls[0]}
-            alt=""
           />
         </div>
 
@@ -287,14 +284,11 @@ export default function PostItem({
               >
                 {data.streamer_ext.is_active_within_a_week ? (
                   <>
-                    <Image
-                      src={
-                        process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
-                        "/icons/space_new_post.png"
-                      }
+                    <OwnIcon
+                      src="/icons/space_new_post.png"
                       width={18}
-                      className="w-4 h-full mr-1"
-                      placeholder=""
+                      className="w-4 h-full "
+                      outClassName="mr-1"
                     />
                     <span className="mr-1 text-primary text-xs">
                       {/* {data.streamer_ext.days_elapsed_since_the_last_zones_update < 7 &&
@@ -364,16 +358,14 @@ export default function PostItem({
                   thumbsUp(data.id, isThumbsUp, setIsThumbsUp, type == "space")
                 }
               >
-                <Image
+                <OwnIcon
                   src={
-                    process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
-                    (isThumbsUp == 1
+                    isThumbsUp == 1
                       ? "/icons/thumbup.png"
-                      : "/icons/notthumbup.png")
+                      : "/icons/notthumbup.png"
                   }
                   width={32}
-                  className="w-4 h-full"
-                  placeholder=""
+                  className="w-full h-full"
                 />
                 <span
                   className={`text-xs ${
diff --git a/components/VideoPlayer/index.jsx b/components/VideoPlayer/index.jsx
new file mode 100644
index 0000000..427cd70
--- /dev/null
+++ b/components/VideoPlayer/index.jsx
@@ -0,0 +1,106 @@
+import React, { useEffect, useState, useRef } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlayCircle, faPauseCircle } from "@fortawesome/free-solid-svg-icons";
+import { Slider, Toast } from "antd-mobile";
+import BackgroundPlayer from "next-video/background-player";
+export default function VideoPlayer({ video }) {
+  const [videoState, setVideoState] = useState({
+    play: true,
+    currentTimePercentage: 0,
+  });
+  const isSliding = useRef(null);
+  // const currentTime = useMemo(()=>{
+  //   const videoPlayer = document.getElementById("videoPlayer");
+  //   if (videoPlayer) {
+  //     return videoPlayer.currentTime;
+  //   }
+  //   return 0;
+  // })
+  useEffect(() => {
+    const videoPlayer = document.getElementById("videoPlayer");
+    if (videoPlayer) {
+      videoPlayer.addEventListener("ended", () => {
+        setVideoState((old) => ({ ...old, play: false }));
+      });
+      videoPlayer.addEventListener("timeupdate", () => {
+        console.log((videoPlayer.currentTime / videoPlayer.duration) * 100);
+        if (!isSliding.current)
+          setVideoState((old) => ({
+            ...old,
+            currentTimePercentage:
+              (videoPlayer.currentTime / videoPlayer.duration) * 100,
+          }));
+      });
+    }
+  }, []);
+  const toastValue = (value) => {
+    isSliding.current = true;
+    const videoPlayer = document.getElementById("videoPlayer");
+    if (!videoPlayer) return;
+    videoPlayer.pause();
+    const totalTime = videoPlayer.duration;
+    let timeSec = 0;
+    if (videoPlayer) {
+      timeSec = (totalTime * value) / 100;
+    }
+    const hour = Math.floor(timeSec / (60 * 60));
+    const minute = Math.floor((timeSec - hour * (60 * 60)) / 60);
+    const second = Math.floor(timeSec - hour * (60 * 60) - minute * 60);
+    Toast.show(
+      `${hour > 9 ? hour : "0" + hour}:${minute > 9 ? minute : "0" + minute}:${
+        second > 9 ? second : "0" + second
+      }`
+    );
+    videoPlayer.currentTime = timeSec;
+    setVideoState((old) => ({ ...old, currentTimePercentage: value }));
+  };
+  const handleStart = () => {
+    const videoPlayer = document.getElementById("videoPlayer");
+    if (!videoPlayer) return;
+    videoPlayer.play();
+    isSliding.current = false;
+  };
+  return (
+    <div className="relative">
+      <BackgroundPlayer
+        src={video.mp4}
+        id="videoPlayer"
+        // controlsList="none"
+        poster={video?.url.src}
+        blurDataURL={video?.url.blurDataURL}
+        autoPlay={videoState.play}
+        // style={{ height: "calc(100vh)" }}
+      />
+      <div
+        className="absolute w-full px-4 grid justify-between items-center"
+        style={{
+          bottom: "12px",
+          gridTemplateColumns: "calc(100% - 32px) 32px",
+        }}
+      >
+        <Slider
+          value={videoState.currentTimePercentage}
+          onAfterChange={handleStart}
+          onChange={toastValue}
+          icon={<div></div>}
+          style={{ "--fill-color": "#ff669e" }}
+        />
+        <FontAwesomeIcon
+          icon={videoState.play ? faPauseCircle : faPlayCircle}
+          style={{ maxWidth: "32px" }}
+          size="2xl"
+          onClick={() => {
+            const videoPlayer = document.getElementById("videoPlayer");
+            if (videoState.play) {
+              setVideoState((old) => ({ ...old, play: false }));
+              videoPlayer.pause();
+            } else {
+              setVideoState((old) => ({ ...old, play: true }));
+              videoPlayer.play();
+            }
+          }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/utils/tools/handleFuns.js b/utils/tools/handleFuns.js
index 9bae6a3..04c7177 100644
--- a/utils/tools/handleFuns.js
+++ b/utils/tools/handleFuns.js
@@ -3,7 +3,7 @@ import { faClose } from "@fortawesome/free-solid-svg-icons";
 import { Dialog, Toast } from "antd-mobile";
 import html2canvas from "html2canvas";
 import { checkRole } from "../auth";
-import Player from "next-video/player";
+import VideoPlayer from "@/components/VideoPlayer";
 // export const handleShowVideos = (video) => {
 //   Dialog.className = "videoMask";
 //   Dialog.show({
@@ -52,7 +52,7 @@ export const handleShowVideo = (video) => {
   Dialog.className = "videoMask";
   Dialog.show({
     title: "",
-    bodyStyle: { paddingTop: 0 },
+    bodyClassName: "!p-0",
     content: (
       <div className="h-screen flex justify-center items-center relative">
         <div
@@ -60,16 +60,10 @@ export const handleShowVideo = (video) => {
           onClick={() => Dialog.clear()}
         ></div>
         <div className="w-screen flex flex-col gap-2 pointer-events-none absolute top-0">
-          <div className="flex w-full justify-end">
-            <div
-              className="pointer-events-auto flex w-12 h-12 justify-center items-center bg-[#33333348] rounded-full"
-              key="closeBtn"
-              onClick={() => Dialog.clear()}
-            >
-              <FontAwesomeIcon icon={faClose} size="2xl" />
-            </div>
-          </div>
-          <div className="my-2 pointer-events-auto">
+          <div
+            className="w-full h-screen pointer-events-auto relative "
+            style={{ background: "#00000080" }}
+          >
             {/* <video
             width="100%"
             height="100%"
@@ -83,14 +77,37 @@ export const handleShowVideo = (video) => {
             您的浏览器不支持 Video 标签。
           </video> */}
             {/* <Video as={ReactPlayer} src={video.mp4} /> */}
-            <Player
-              src={video.mp4}
-              controlslist="nodownload"
-              poster={video?.url.src}
-              blurDataURL={video?.url.blurDataURL}
-              autoPlay={true}
-              style={{ height: "calc(100vh - 180px)" }}
-            />
+            <div className="absolute top-1/2 -translate-y-1/2 w-full">
+              <VideoPlayer video={video} />
+            </div>
+
+            {/* <label
+              onClick={() => {
+                const videoPlayer = document.getElementById("videoPlayer");
+                console.log("videoPlayer", videoPlayer, videoPlayer.click);
+                // videoPlayer.play();
+                if (state.play) {
+                  state.play = false;
+                  videoPlayer.pause();
+                } else {
+                  state.play = true;
+                  videoPlayer.play();
+                }
+              }}
+              className="block w-full h-screen bg-[#ab27275e] absolute top-0"
+            /> */}
+            <div
+              className="max-w-max absolute top-[21px] right-4 z-30"
+              style={{ top: "21px", zIndex: 30 }}
+            >
+              <div
+                className="pointer-events-auto flex w-12 h-12 justify-center items-center bg-[#33333348] rounded-full"
+                key="closeBtn"
+                onClick={() => Dialog.clear()}
+              >
+                <FontAwesomeIcon icon={faClose} size="2xl" />
+              </div>
+            </div>
             {/* <Player
             src="https://www.mydomain.com/remote-video.mp4"
             poster="https://www.mydomain.com/remote-poster.webp"