commit f8f8184430dc6bc268f620a2d611051e7b97ded6
author zhaoyumao <2451882060@qq.com> Mon Jun 09 00:00:46 2025 +0800
committer zhaoyumao <2451882060@qq.com> Mon Jun 09 00:00:46 2025 +0800
tree e14e9240edd660858016446fa68dd38b57c69fdd
parent 4367e46811418aa4c48df8e4eb267d6802204597

合并冲突

Change-Id: I3b6ac5ae87aad8fe746eceecc8f92fc5574b50a8

src/app.tsx

diff --git a/src/app.tsx b/src/app.tsx
index 38f76b4..c5a779f 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -61,7 +61,7 @@
 }
 
 // ProLayout 支持的api https://procomponents.ant.design/components/layout
-export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
+export const layout: ({initialState, setInitialState}: { initialState: any; setInitialState: any }) => any = ({ initialState, setInitialState }) => {
   return {
     actionsRender: () => [<Question key="doc" />, <SelectLang key="SelectLang" />],
     avatarProps: {
@@ -115,14 +115,6 @@
         width: '331px',
       },
     ],
-    links: isDev
-      ? [
-        <Link key="openapi" to="/umi/plugin/openapi" target="_blank">
-          <LinkOutlined />
-          <span>OpenAPI 文档</span>
-        </Link>,
-      ]
-      : [],
     menuHeaderRender: undefined,
     // 自定义 403 页面
     // unAccessible: <div>unAccessible</div>,

src/components/Footer/index.tsx

diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index f204ac2..ce8fe07 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -8,26 +8,7 @@
       style={{
         background: 'none',
       }}
-      links={[
-        {
-          key: 'Ant Design Pro',
-          title: 'Ant Design Pro',
-          href: 'https://pro.ant.design',
-          blankTarget: true,
-        },
-        {
-          key: 'github',
-          title: <GithubOutlined />,
-          href: 'https://github.com/ant-design/ant-design-pro',
-          blankTarget: true,
-        },
-        {
-          key: 'Ant Design',
-          title: 'Ant Design',
-          href: 'https://ant.design',
-          blankTarget: true,
-        },
-      ]}
+      copyright={`${new Date().getFullYear()} ThunderHub JRX MSY ZYT HXQ LJB`}
     />
   );
 };

src/components/RightContent/index.tsx

diff --git a/src/components/RightContent/index.tsx b/src/components/RightContent/index.tsx
index 20a7831..a6f40be 100644
--- a/src/components/RightContent/index.tsx
+++ b/src/components/RightContent/index.tsx
@@ -22,7 +22,7 @@
         height: 26,
       }}
       onClick={() => {
-        window.open('https://pro.ant.design/docs/getting-started');
+        window.open('https://kdocs.cn/l/cukLn6L241Ou');
       }}
     >
       <QuestionCircleOutlined />

src/global.less

diff --git a/src/global.less b/src/global.less
index a9a0c51..97fa011 100644
--- a/src/global.less
+++ b/src/global.less
@@ -16,6 +16,7 @@
 .ant-layout {
   min-height: 100vh;
 }
+
 .ant-pro-sider.ant-layout-sider.ant-pro-sider-fixed {
   left: unset;
 }
@@ -39,12 +40,15 @@
   .ant-table {
     width: 100%;
     overflow-x: auto;
-    &-thead > tr,
-    &-tbody > tr {
-      > th,
-      > td {
+
+    &-thead>tr,
+    &-tbody>tr {
+
+      >th,
+      >td {
         white-space: pre;
-        > span {
+
+        >span {
           display: block;
         }
       }

src/pages/Bounty/Detail.tsx

diff --git a/src/pages/Bounty/Detail.tsx b/src/pages/Bounty/Detail.tsx
index 41a25df..78743da 100644
--- a/src/pages/Bounty/Detail.tsx
+++ b/src/pages/Bounty/Detail.tsx
@@ -36,7 +36,7 @@
 
       if (res.code === 200) {
         message.success('采纳成功');
-        setBounty(prev => {
+        setBounty((prev: API.BountyDetail) => {
           console.log('【状态更新】', {
             old: prev.submissions,
             new: prev.submissions?.map(sub =>
@@ -49,7 +49,7 @@
             submissions: prev.submissions?.map(sub =>
               sub.id === submissionId ? { ...sub, status: 1 } : sub
             )
-          };
+          } as API.BountyDetail;
         });
       } else {
         message.error(`采纳失败: ${res.msg}`);
@@ -75,14 +75,14 @@
       }
 
       const blob = await downloadAttachment(attachmentPath);
-      const url = window.URL.createObjectURL(blob);
+      const url = (window as any).URL.createObjectURL(blob);
       const a = document.createElement('a');
       a.href = url;
       a.download = attachmentPath.split('/').pop() || 'file';
       document.body.appendChild(a);
       a.click();
       a.remove();
-      window.URL.revokeObjectURL(url);
+      (window as any).URL.revokeObjectURL(url);
     } catch (err) {
       message.error('下载附件失败，请重试');
       console.error('下载附件失败:', err);
@@ -104,7 +104,7 @@
         console.error('获取用户信息失败:', err);
       }
     };
-    fetchProfile();
+    fetchProfile().then(r => {});
   }, []);
 
 
@@ -134,7 +134,7 @@
       }
     };
 
-    loadBountyDetail();
+    loadBountyDetail().then(r => {});
   }, [id]);
 
   return (

src/pages/Home/css/stars-style.css

diff --git a/src/pages/Home/css/stars-style.css b/src/pages/Home/css/stars-style.css
new file mode 100644
index 0000000..0f37c1f
--- /dev/null
+++ b/src/pages/Home/css/stars-style.css
@@ -0,0 +1,1559 @@
+.main {
+  display: flex;
+  z-index: 1;
+  position: relative;
+  opacity: 0.8;
+}
+
+.origin,
+.origin::before,
+.origin::after {
+  margin: 0;
+  border: 0;
+  padding: 0;
+  box-sizing: border-box;
+  z-index: 0;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate3d(-50%, -50%, 0);
+  transform: translate3d(-50%, -50%, 0);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.teee {
+  z-index: 2;
+  font-size: 50px;
+}
+
+html {
+  height: 100vh;
+  width: 100vw;
+}
+
+body,
+.galaxy {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+body {
+  background: #0e0220;
+  height: 100%;
+  width: 100%;
+  overflow-x: hidden;
+  -webkit-perspective: 100vmin;
+  perspective: 100vmin;
+}
+
+.origin,
+.control,
+.galaxy,
+.star {
+  position: absolute;
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+}
+
+.origin {
+  -webkit-transform: translate3d(0vw, 0vh, 0vmin);
+  transform: translate3d(0vw, 0vh, 0vmin);
+}
+
+.control {
+  -webkit-transform: scale3d(0, 0, 0);
+  transform: scale3d(0, 0, 0);
+  -webkit-animation: appear 10s linear forwards;
+  animation: appear 10s linear forwards;
+}
+
+.galaxy {
+  -webkit-animation: rotation 10s linear infinite;
+  animation: rotation 10s linear infinite;
+}
+
+.star,
+.star::before,
+.star::after {
+  position: absolute;
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+}
+
+.star::before,
+.star::after {
+  background: var(--background);
+  border-radius: 50%;
+  box-shadow: var(--shadow);
+  content: '';
+  height: var(--size);
+  width: var(--size);
+}
+
+.star::before {
+  -webkit-transform: var(--transform);
+  transform: var(--transform);
+}
+
+.star::after {
+  -webkit-transform: scale3d(-1, -1, -1) var(--transform);
+  transform: scale3d(-1, -1, -1) var(--transform);
+}
+
+.star:nth-of-type(1) {
+  --size: 0.2835921021vmin;
+  --background: #642674;
+  --shadow: 0 0 0.1750153474vmin 0.0363164749vmin #642674;
+  --transform: rotate3d(1, 0, 0, 328deg) rotate3d(0, 1, 0, 135deg) rotate3d(0, 0, 1, 96deg) translate3d(0, 0, 82.541015291vmin);
+}
+
+.star:nth-of-type(2) {
+  --size: 0.7413082831vmin;
+  --background: #fff299;
+  --shadow: 0 0 0.6505248375vmin 0.3246593503vmin #fff4ad;
+  --transform: rotate3d(1, 0, 0, 172deg) rotate3d(0, 1, 0, 111deg) rotate3d(0, 0, 1, 130deg) translate3d(0, 0, 87.5727103039vmin);
+}
+
+.star:nth-of-type(3) {
+  --size: 0.4260554564vmin;
+  --background: #8380f5;
+  --shadow: 0 0 0.5861517082vmin 0.2004683041vmin #8380f5;
+  --transform: rotate3d(1, 0, 0, 250deg) rotate3d(0, 1, 0, 310deg) rotate3d(0, 0, 1, 317deg) translate3d(0, 0, 78.8602777857vmin);
+}
+
+.star:nth-of-type(4) {
+  --size: 0.7103443369vmin;
+  --background: #f2eda3;
+  --shadow: 0 0 0.7010757604vmin 0.2007248801vmin #f2eda3;
+  --transform: rotate3d(1, 0, 0, 69deg) rotate3d(0, 1, 0, 100deg) rotate3d(0, 0, 1, 83deg) translate3d(0, 0, 87.0936338506vmin);
+}
+
+.star:nth-of-type(5) {
+  --size: 0.663428383vmin;
+  --background: #722b83;
+  --shadow: 0 0 0.80461304vmin 0.2224569914vmin #722b83;
+  --transform: rotate3d(1, 0, 0, 5deg) rotate3d(0, 1, 0, 265deg) rotate3d(0, 0, 1, 118deg) translate3d(0, 0, 88.4998499479vmin);
+}
+
+.star:nth-of-type(6) {
+  --size: 0.7176506352vmin;
+  --background: #eee784;
+  --shadow: 0 0 0.3877486259vmin 0.3321995916vmin #f4efb0;
+  --transform: rotate3d(1, 0, 0, 91deg) rotate3d(0, 1, 0, 309deg) rotate3d(0, 0, 1, 358deg) translate3d(0, 0, 89.2378760161vmin);
+}
+
+.star:nth-of-type(7) {
+  --size: 0.310865557vmin;
+  --background: #642674;
+  --shadow: 0 0 0.3792362228vmin 0.0753154867vmin #642674;
+  --transform: rotate3d(1, 0, 0, 315deg) rotate3d(0, 1, 0, 109deg) rotate3d(0, 0, 1, 267deg) translate3d(0, 0, 86.8954812814vmin);
+}
+
+.star:nth-of-type(8) {
+  --size: 0.7206382278vmin;
+  --background: #5a2268;
+  --shadow: 0 0 0.4802848584vmin 0.3214256666vmin #682878;
+  --transform: rotate3d(1, 0, 0, 331deg) rotate3d(0, 1, 0, 113deg) rotate3d(0, 0, 1, 309deg) translate3d(0, 0, 71.2468353149vmin);
+}
+
+.star:nth-of-type(9) {
+  --size: 0.424013172vmin;
+  --background: #6b297c;
+  --shadow: 0 0 0.4529582791vmin 0.0383392416vmin #6b297c;
+  --transform: rotate3d(1, 0, 0, 223deg) rotate3d(0, 1, 0, 352deg) rotate3d(0, 0, 1, 277deg) translate3d(0, 0, 79.1411897476vmin);
+}
+
+.star:nth-of-type(10) {
+  --size: 0.7107513334vmin;
+  --background: #ff5880;
+  --shadow: 0 0 0.9962013414vmin 0.1962571025vmin #ff5880;
+  --transform: rotate3d(1, 0, 0, 101deg) rotate3d(0, 1, 0, 107deg) rotate3d(0, 0, 1, 16deg) translate3d(0, 0, 70.1759644933vmin);
+}
+
+.star:nth-of-type(11) {
+  --size: 0.5707603905vmin;
+  --background: #6b297c;
+  --shadow: 0 0 0.3749602159vmin 0.200128313vmin #6b297c;
+  --transform: rotate3d(1, 0, 0, 243deg) rotate3d(0, 1, 0, 77deg) rotate3d(0, 0, 1, 193deg) translate3d(0, 0, 71.7100001416vmin);
+}
+
+.star:nth-of-type(12) {
+  --size: 0.5798447244vmin;
+  --background: #6c69f3;
+  --shadow: 0 0 0.5713127208vmin 0.1327069878vmin #7e7bf5;
+  --transform: rotate3d(1, 0, 0, 205deg) rotate3d(0, 1, 0, 54deg) rotate3d(0, 0, 1, 42deg) translate3d(0, 0, 80.4488561184vmin);
+}
+
+.star:nth-of-type(13) {
+  --size: 0.677564678vmin;
+  --background: #8df48e;
+  --shadow: 0 0 0.3432892544vmin 0.1001157273vmin #bbf8bc;
+  --transform: rotate3d(1, 0, 0, 120deg) rotate3d(0, 1, 0, 110deg) rotate3d(0, 0, 1, 201deg) translate3d(0, 0, 82.7612765812vmin);
+}
+
+.star:nth-of-type(14) {
+  --size: 0.4961091404vmin;
+  --background: #13a9e9;
+  --shadow: 0 0 0.4328784371vmin 0.2340385488vmin #2cb4ee;
+  --transform: rotate3d(1, 0, 0, 357deg) rotate3d(0, 1, 0, 143deg) rotate3d(0, 0, 1, 266deg) translate3d(0, 0, 78.8844240801vmin);
+}
+
+.star:nth-of-type(15) {
+  --size: 0.4095470191vmin;
+  --background: #12a2e0;
+  --shadow: 0 0 0.5125966447vmin 0.0001667585vmin #36b7ef;
+  --transform: rotate3d(1, 0, 0, 359deg) rotate3d(0, 1, 0, 298deg) rotate3d(0, 0, 1, 311deg) translate3d(0, 0, 76.3303084405vmin);
+}
+
+.star:nth-of-type(16) {
+  --size: 0.7408991482vmin;
+  --background: #ea1b90;
+  --shadow: 0 0 0.5636452941vmin 0.3366402359vmin #ea1b90;
+  --transform: rotate3d(1, 0, 0, 54deg) rotate3d(0, 1, 0, 19deg) rotate3d(0, 0, 1, 167deg) translate3d(0, 0, 70.4007677602vmin);
+}
+
+.star:nth-of-type(17) {
+  --size: 0.5275932186vmin;
+  --background: #dd1486;
+  --shadow: 0 0 0.3797963007vmin 0.1531168848vmin #eb2495;
+  --transform: rotate3d(1, 0, 0, 178deg) rotate3d(0, 1, 0, 222deg) rotate3d(0, 0, 1, 277deg) translate3d(0, 0, 72.288528018vmin);
+}
+
+.star:nth-of-type(18) {
+  --size: 0.5093118435vmin;
+  --background: #ea1b90;
+  --shadow: 0 0 0.3970329884vmin 0.0773944724vmin #ea1b90;
+  --transform: rotate3d(1, 0, 0, 268deg) rotate3d(0, 1, 0, 327deg) rotate3d(0, 0, 1, 46deg) translate3d(0, 0, 76.8482204992vmin);
+}
+
+.star:nth-of-type(19) {
+  --size: 0.6952201696vmin;
+  --background: #f4efb0;
+  --shadow: 0 0 0.5488628261vmin 0.0060727272vmin #f4efb0;
+  --transform: rotate3d(1, 0, 0, 51deg) rotate3d(0, 1, 0, 92deg) rotate3d(0, 0, 1, 131deg) translate3d(0, 0, 76.3199369121vmin);
+}
+
+.star:nth-of-type(20) {
+  --size: 0.6499208005vmin;
+  --background: #f46f6f;
+  --shadow: 0 0 0.8953697874vmin 0.0508831665vmin #f89f9f;
+  --transform: rotate3d(1, 0, 0, 247deg) rotate3d(0, 1, 0, 336deg) rotate3d(0, 0, 1, 52deg) translate3d(0, 0, 75.7195953194vmin);
+}
+
+.star:nth-of-type(21) {
+  --size: 0.4313161361vmin;
+  --background: #ff76ad;
+  --shadow: 0 0 0.3734112201vmin 0.0457078964vmin #ff80b3;
+  --transform: rotate3d(1, 0, 0, 102deg) rotate3d(0, 1, 0, 353deg) rotate3d(0, 0, 1, 150deg) translate3d(0, 0, 84.5243263407vmin);
+}
+
+.star:nth-of-type(22) {
+  --size: 0.3240513094vmin;
+  --background: #8885f5;
+  --shadow: 0 0 0.4107185309vmin 0.1598999491vmin #8885f5;
+  --transform: rotate3d(1, 0, 0, 4deg) rotate3d(0, 1, 0, 56deg) rotate3d(0, 0, 1, 19deg) translate3d(0, 0, 68.252893429vmin);
+}
+
+.star:nth-of-type(23) {
+  --size: 0.6749804977vmin;
+  --background: #ff5880;
+  --shadow: 0 0 0.4141135488vmin 0.1769542018vmin #ff5880;
+  --transform: rotate3d(1, 0, 0, 358deg) rotate3d(0, 1, 0, 231deg) rotate3d(0, 0, 1, 134deg) translate3d(0, 0, 67.9039057691vmin);
+}
+
+.star:nth-of-type(24) {
+  --size: 0.6867114982vmin;
+  --background: #f3efac;
+  --shadow: 0 0 0.6317027386vmin 0.1537394151vmin #f3efac;
+  --transform: rotate3d(1, 0, 0, 14deg) rotate3d(0, 1, 0, 237deg) rotate3d(0, 0, 1, 354deg) translate3d(0, 0, 68.1685987935vmin);
+}
+
+.star:nth-of-type(25) {
+  --size: 0.2975356259vmin;
+  --background: #8df48e;
+  --shadow: 0 0 0.4398389524vmin 0.1469801421vmin #bbf8bc;
+  --transform: rotate3d(1, 0, 0, 359deg) rotate3d(0, 1, 0, 97deg) rotate3d(0, 0, 1, 147deg) translate3d(0, 0, 72.8612817003vmin);
+}
+
+.star:nth-of-type(26) {
+  --size: 0.2837776299vmin;
+  --background: #f68c8c;
+  --shadow: 0 0 0.3889918047vmin 0.0249919736vmin #f68c8c;
+  --transform: rotate3d(1, 0, 0, 5deg) rotate3d(0, 1, 0, 61deg) rotate3d(0, 0, 1, 110deg) translate3d(0, 0, 87.1599145942vmin);
+}
+
+.star:nth-of-type(27) {
+  --size: 0.5670151251vmin;
+  --background: #6b297c;
+  --shadow: 0 0 0.6020377769vmin 0.150933111vmin #6b297c;
+  --transform: rotate3d(1, 0, 0, 234deg) rotate3d(0, 1, 0, 215deg) rotate3d(0, 0, 1, 198deg) translate3d(0, 0, 71.7383274494vmin);
+}
+
+.star:nth-of-type(28) {
+  --size: 0.4194113403vmin;
+  --background: #ff8fbc;
+  --shadow: 0 0 0.38499725vmin 0.0846148475vmin #ff8fbc;
+  --transform: rotate3d(1, 0, 0, 84deg) rotate3d(0, 1, 0, 61deg) rotate3d(0, 0, 1, 313deg) translate3d(0, 0, 80.6542144621vmin);
+}
+
+.star:nth-of-type(29) {
+  --size: 0.605556292vmin;
+  --background: #fbfcfd;
+  --shadow: 0 0 0.8654118937vmin 0.1521606756vmin #fbfcfd;
+  --transform: rotate3d(1, 0, 0, 136deg) rotate3d(0, 1, 0, 191deg) rotate3d(0, 0, 1, 329deg) translate3d(0, 0, 81.3092544414vmin);
+}
+
+.star:nth-of-type(30) {
+  --size: 0.4811772514vmin;
+  --background: #b2f7b3;
+  --shadow: 0 0 0.3313041848vmin 0.1300370323vmin #b2f7b3;
+  --transform: rotate3d(1, 0, 0, 16deg) rotate3d(0, 1, 0, 104deg) rotate3d(0, 0, 1, 62deg) translate3d(0, 0, 73.868380679vmin);
+}
+
+.star:nth-of-type(31) {
+  --size: 0.4767887783vmin;
+  --background: #f1f4f7;
+  --shadow: 0 0 0.5256370696vmin 0.193330741vmin #f1f4f7;
+  --transform: rotate3d(1, 0, 0, 308deg) rotate3d(0, 1, 0, 56deg) rotate3d(0, 0, 1, 249deg) translate3d(0, 0, 75.3259937348vmin);
+}
+
+.star:nth-of-type(32) {
+  --size: 0.3488615182vmin;
+  --background: #eee784;
+  --shadow: 0 0 0.1783888201vmin 0.0877796286vmin #f4efb0;
+  --transform: rotate3d(1, 0, 0, 22deg) rotate3d(0, 1, 0, 56deg) rotate3d(0, 0, 1, 120deg) translate3d(0, 0, 87.9945198278vmin);
+}
+
+.star:nth-of-type(33) {
+  --size: 0.6272794925vmin;
+  --background: #7e7bf5;
+  --shadow: 0 0 0.4018138602vmin 0.0036085878vmin #7e7bf5;
+  --transform: rotate3d(1, 0, 0, 72deg) rotate3d(0, 1, 0, 4deg) rotate3d(0, 0, 1, 108deg) translate3d(0, 0, 74.9429716204vmin);
+}
+
+.star:nth-of-type(34) {
+  --size: 0.5980763449vmin;
+  --background: #f68c8c;
+  --shadow: 0 0 0.609028633vmin 0.0206698956vmin #f68c8c;
+  --transform: rotate3d(1, 0, 0, 43deg) rotate3d(0, 1, 0, 294deg) rotate3d(0, 0, 1, 120deg) translate3d(0, 0, 76.1165457048vmin);
+}
+
+.star:nth-of-type(35) {
+  --size: 0.6185383144vmin;
+  --background: #eee784;
+  --shadow: 0 0 0.372974437vmin 0.1348613878vmin #f4efb0;
+  --transform: rotate3d(1, 0, 0, 184deg) rotate3d(0, 1, 0, 2deg) rotate3d(0, 0, 1, 25deg) translate3d(0, 0, 67.3368436297vmin);
+}
+
+.star:nth-of-type(36) {
+  --size: 0.4141415773vmin;
+  --background: #ff8fbc;
+  --shadow: 0 0 0.5083147474vmin 0.0947692398vmin #ff8fbc;
+  --transform: rotate3d(1, 0, 0, 200deg) rotate3d(0, 1, 0, 4deg) rotate3d(0, 0, 1, 111deg) translate3d(0, 0, 80.5099805988vmin);
+}
+
+.star:nth-of-type(37) {
+  --size: 0.464004449vmin;
+  --background: #31b6ef;
+  --shadow: 0 0 0.4434728559vmin 0.0845349624vmin #31b6ef;
+  --transform: rotate3d(1, 0, 0, 331deg) rotate3d(0, 1, 0, 5deg) rotate3d(0, 0, 1, 207deg) translate3d(0, 0, 73.7570183556vmin);
+}
+
+.star:nth-of-type(38) {
+  --size: 0.4698868978vmin;
+  --background: #e8edf1;
+  --shadow: 0 0 0.3505111485vmin 0.0437121938vmin #f4f7f9;
+  --transform: rotate3d(1, 0, 0, 121deg) rotate3d(0, 1, 0, 85deg) rotate3d(0, 0, 1, 48deg) translate3d(0, 0, 73.9383472235vmin);
+}
+
+.star:nth-of-type(39) {
+  --size: 0.5291774426vmin;
+  --background: #eee784;
+  --shadow: 0 0 0.6760046753vmin 0.2242731162vmin #f4efb0;
+  --transform: rotate3d(1, 0, 0, 99deg) rotate3d(0, 1, 0, 353deg) rotate3d(0, 0, 1, 352deg) translate3d(0, 0, 77.1554461862vmin);
+}
+
+.star:nth-of-type(40) {
+  --size: 0.397408839vmin;
+  --background: #eb2495;
+  --shadow: 0 0 0.4577027818vmin 0.1326726142vmin #eb2495;
+  --transform: rotate3d(1, 0, 0, 283deg) rotate3d(0, 1, 0, 238deg) rotate3d(0, 0, 1, 22deg) translate3d(0, 0, 85.7114320814vmin);
+}
+
+.star:nth-of-type(41) {
+  --size: 0.603770632vmin;
+  --background: #9ff6a0;
+  --shadow: 0 0 0.7902997107vmin 0.0263510083vmin #a9f6aa;
+  --transform: rotate3d(1, 0, 0, 107deg) rotate3d(0, 1, 0, 341deg) rotate3d(0, 0, 1, 119deg) translate3d(0, 0, 83.7631686076vmin);
+}
+
+.star:nth-of-type(42) {
+  --size: 0.465232013vmin;
+  --background: #5e246c;
+  --shadow: 0 0 0.5225434805vmin 0.1472809201vmin #642674;
+  --transform: rotate3d(1, 0, 0, 41deg) rotate3d(0, 1, 0, 7deg) rotate3d(0, 0, 1, 92deg) translate3d(0, 0, 84.8182932106vmin);
+}
+
+.star:nth-of-type(43) {
+  --size: 0.6262782247vmin;
+  --background: #eb1f93;
+  --shadow: 0 0 0.3668392443vmin 0.0923044749vmin #eb1f93;
+  --transform: rotate3d(1, 0, 0, 256deg) rotate3d(0, 1, 0, 72deg) rotate3d(0, 0, 1, 278deg) translate3d(0, 0, 84.8646247391vmin);
+}
+
+.star:nth-of-type(44) {
+  --size: 0.6596081053vmin;
+  --background: #eee784;
+  --shadow: 0 0 0.430519321vmin 0.138734676vmin #f4efb0;
+  --transform: rotate3d(1, 0, 0, 162deg) rotate3d(0, 1, 0, 315deg) rotate3d(0, 0, 1, 3deg) translate3d(0, 0, 67.4594641047vmin);
+}
+
+.star:nth-of-type(45) {
+  --size: 0.2847169677vmin;
+  --background: #ec2d99;
+  --shadow: 0 0 0.3148592915vmin 0.0475358208vmin #ec2d99;
+  --transform: rotate3d(1, 0, 0, 203deg) rotate3d(0, 1, 0, 335deg) rotate3d(0, 0, 1, 53deg) translate3d(0, 0, 80.8401831944vmin);
+}
+
+.star:nth-of-type(46) {
+  --size: 0.5982546971vmin;
+  --background: #fff4ad;
+  --shadow: 0 0 0.3740264621vmin 0.0220836309vmin #fff4ad;
+  --transform: rotate3d(1, 0, 0, 287deg) rotate3d(0, 1, 0, 195deg) rotate3d(0, 0, 1, 316deg) translate3d(0, 0, 84.3902592852vmin);
+}
+
+.star:nth-of-type(47) {
+  --size: 0.3460276847vmin;
+  --background: #fff29e;
+  --shadow: 0 0 0.2354502895vmin 0.0467396953vmin #fff4a8;
+  --transform: rotate3d(1, 0, 0, 260deg) rotate3d(0, 1, 0, 288deg) rotate3d(0, 0, 1, 287deg) translate3d(0, 0, 76.8940861586vmin);
+}
+
+.star:nth-of-type(48) {
+  --size: 0.5596928991vmin;
+  --background: #f0ea96;
+  --shadow: 0 0 0.7607250341vmin 0.2489202044vmin #f2ec9e;
+  --transform: rotate3d(1, 0, 0, 143deg) rotate3d(0, 1, 0, 68deg) rotate3d(0, 0, 1, 299deg) translate3d(0, 0, 68.7212870368vmin);
+}
+
+.star:nth-of-type(49) {
+  --size: 0.2606228013vmin;
+  --background: #5a2268;
+  --shadow: 0 0 0.2000348246vmin 0.0770928869vmin #682878;
+  --transform: rotate3d(1, 0, 0, 161deg) rotate3d(0, 1, 0, 308deg) rotate3d(0, 0, 1, 60deg) translate3d(0, 0, 79.1863949655vmin);
+}
+
+.star:nth-of-type(50) {
+  --size: 0.6080022812vmin;
+  --background: #fff29e;
+  --shadow: 0 0 0.8312878476vmin 0.2685253509vmin #fff4a8;
+  --transform: rotate3d(1, 0, 0, 349deg) rotate3d(0, 1, 0, 256deg) rotate3d(0, 0, 1, 161deg) translate3d(0, 0, 69.0454961211vmin);
+}
+
+.star:nth-of-type(51) {
+  --size: 0.6308082519vmin;
+  --background: #f9b890;
+  --shadow: 0 0 0.5806088691vmin 0.0975256905vmin #f9b890;
+  --transform: rotate3d(1, 0, 0, 150deg) rotate3d(0, 1, 0, 203deg) rotate3d(0, 0, 1, 172deg) translate3d(0, 0, 65.0219072235vmin);
+}
+
+.star:nth-of-type(52) {
+  --size: 0.6358630529vmin;
+  --background: #f0ea96;
+  --shadow: 0 0 0.8041647058vmin 0.2733630044vmin #f2ec9e;
+  --transform: rotate3d(1, 0, 0, 247deg) rotate3d(0, 1, 0, 47deg) rotate3d(0, 0, 1, 129deg) translate3d(0, 0, 76.8858560927vmin);
+}
+
+.star:nth-of-type(53) {
+  --size: 0.258578505vmin;
+  --background: #5e246c;
+  --shadow: 0 0 0.2370299913vmin 0.0514659196vmin #642674;
+  --transform: rotate3d(1, 0, 0, 166deg) rotate3d(0, 1, 0, 91deg) rotate3d(0, 0, 1, 54deg) translate3d(0, 0, 65.0763202274vmin);
+}
+
+.star:nth-of-type(54) {
+  --size: 0.6863312693vmin;
+  --background: #a9f6aa;
+  --shadow: 0 0 0.5525499989vmin 0.1330258874vmin #a9f6aa;
+  --transform: rotate3d(1, 0, 0, 311deg) rotate3d(0, 1, 0, 151deg) rotate3d(0, 0, 1, 62deg) translate3d(0, 0, 68.5381740092vmin);
+}
+
+.star:nth-of-type(55) {
+  --size: 0.3153180967vmin;
+  --background: #36b7ef;
+  --shadow: 0 0 0.4088170459vmin 0.0815502545vmin #36b7ef;
+  --transform: rotate3d(1, 0, 0, 96deg) rotate3d(0, 1, 0, 44deg) rotate3d(0, 0, 1, 96deg) translate3d(0, 0, 67.3711748168vmin);
+}
+
+.star:nth-of-type(56) {
+  --size: 0.2738237241vmin;
+  --background: #a9f6aa;
+  --shadow: 0 0 0.3410957316vmin 0.1091095537vmin #a9f6aa;
+  --transform: rotate3d(1, 0, 0, 19deg) rotate3d(0, 1, 0, 199deg) rotate3d(0, 0, 1, 232deg) translate3d(0, 0, 68.6130981123vmin);
+}
+
+.star:nth-of-type(57) {
+  --size: 0.7279799305vmin;
+  --background: #f4f7f9;
+  --shadow: 0 0 0.8106203033vmin 0.2982988197vmin #f4f7f9;
+  --transform: rotate3d(1, 0, 0, 266deg) rotate3d(0, 1, 0, 190deg) rotate3d(0, 0, 1, 336deg) translate3d(0, 0, 72.2311430666vmin);
+}
+
+.star:nth-of-type(58) {
+  --size: 0.4755597648vmin;
+  --background: #d81383;
+  --shadow: 0 0 0.7104403245vmin 0.1956941268vmin #ec2997;
+  --transform: rotate3d(1, 0, 0, 184deg) rotate3d(0, 1, 0, 2deg) rotate3d(0, 0, 1, 349deg) translate3d(0, 0, 72.6784743962vmin);
+}
+
+.star:nth-of-type(59) {
+  --size: 0.4782404758vmin;
+  --background: #e4ebef;
+  --shadow: 0 0 0.4281260562vmin 0.2170947923vmin #f8f9fb;
+  --transform: rotate3d(1, 0, 0, 49deg) rotate3d(0, 1, 0, 327deg) rotate3d(0, 0, 1, 175deg) translate3d(0, 0, 89.2713807917vmin);
+}
+
+.star:nth-of-type(60) {
+  --size: 0.2964480316vmin;
+  --background: #f3efac;
+  --shadow: 0 0 0.2536986779vmin 0.0131278677vmin #f3efac;
+  --transform: rotate3d(1, 0, 0, 8deg) rotate3d(0, 1, 0, 36deg) rotate3d(0, 0, 1, 187deg) translate3d(0, 0, 87.2897718006vmin);
+}
+
+.star:nth-of-type(61) {
+  --size: 0.4950567207vmin;
+  --background: #722b83;
+  --shadow: 0 0 0.5751843893vmin 0.0637395051vmin #722b83;
+  --transform: rotate3d(1, 0, 0, 124deg) rotate3d(0, 1, 0, 229deg) rotate3d(0, 0, 1, 293deg) translate3d(0, 0, 86.8516811606vmin);
+}
+
+.star:nth-of-type(62) {
+  --size: 0.6968564634vmin;
+  --background: #6764f3;
+  --shadow: 0 0 0.5822409922vmin 0.3057737592vmin #8380f5;
+  --transform: rotate3d(1, 0, 0, 158deg) rotate3d(0, 1, 0, 93deg) rotate3d(0, 0, 1, 312deg) translate3d(0, 0, 87.4192006408vmin);
+}
+
+.star:nth-of-type(63) {
+  --size: 0.6210690798vmin;
+  --background: #f68282;
+  --shadow: 0 0 0.3311509731vmin 0.0602709837vmin #f68c8c;
+  --transform: rotate3d(1, 0, 0, 137deg) rotate3d(0, 1, 0, 255deg) rotate3d(0, 0, 1, 313deg) translate3d(0, 0, 81.4470528151vmin);
+}
+
+.star:nth-of-type(64) {
+  --size: 0.4810203113vmin;
+  --background: #ff76ad;
+  --shadow: 0 0 0.3101639264vmin 0.0580835808vmin #ff80b3;
+  --transform: rotate3d(1, 0, 0, 104deg) rotate3d(0, 1, 0, 254deg) rotate3d(0, 0, 1, 275deg) translate3d(0, 0, 80.6208890189vmin);
+}
+
+.star:nth-of-type(65) {
+  --size: 0.435821928vmin;
+  --background: #96f597;
+  --shadow: 0 0 0.468401592vmin 0.0249656019vmin #b2f7b3;
+  --transform: rotate3d(1, 0, 0, 152deg) rotate3d(0, 1, 0, 227deg) rotate3d(0, 0, 1, 79deg) translate3d(0, 0, 77.1249749052vmin);
+}
+
+.star:nth-of-type(66) {
+  --size: 0.4772019721vmin;
+  --background: #f79a60;
+  --shadow: 0 0 0.3841178942vmin 0.1531861374vmin #f9b890;
+  --transform: rotate3d(1, 0, 0, 18deg) rotate3d(0, 1, 0, 177deg) rotate3d(0, 0, 1, 235deg) translate3d(0, 0, 76.3255865521vmin);
+}
+
+.star:nth-of-type(67) {
+  --size: 0.5674481297vmin;
+  --background: #e4ebef;
+  --shadow: 0 0 0.6485218032vmin 0.0711831777vmin #f8f9fb;
+  --transform: rotate3d(1, 0, 0, 69deg) rotate3d(0, 1, 0, 258deg) rotate3d(0, 0, 1, 48deg) translate3d(0, 0, 72.9836878012vmin);
+}
+
+.star:nth-of-type(68) {
+  --size: 0.585418409vmin;
+  --background: #dd1486;
+  --shadow: 0 0 0.3032211738vmin 0.2523558281vmin #eb2495;
+  --transform: rotate3d(1, 0, 0, 337deg) rotate3d(0, 1, 0, 158deg) rotate3d(0, 0, 1, 289deg) translate3d(0, 0, 89.7667201697vmin);
+}
+
+.star:nth-of-type(69) {
+  --size: 0.3053087982vmin;
+  --background: #d31380;
+  --shadow: 0 0 0.2221057874vmin 0.0399455253vmin #ec2d99;
+  --transform: rotate3d(1, 0, 0, 205deg) rotate3d(0, 1, 0, 132deg) rotate3d(0, 0, 1, 135deg) translate3d(0, 0, 74.7457940313vmin);
+}
+
+.star:nth-of-type(70) {
+  --size: 0.6152716804vmin;
+  --background: #eee784;
+  --shadow: 0 0 0.3651403257vmin 0.1986129325vmin #f4efb0;
+  --transform: rotate3d(1, 0, 0, 235deg) rotate3d(0, 1, 0, 27deg) rotate3d(0, 0, 1, 155deg) translate3d(0, 0, 82.3198147262vmin);
+}
+
+.star:nth-of-type(71) {
+  --size: 0.5015899655vmin;
+  --background: #2cb4ee;
+  --shadow: 0 0 0.6017289468vmin 0.0338592473vmin #2cb4ee;
+  --transform: rotate3d(1, 0, 0, 273deg) rotate3d(0, 1, 0, 319deg) rotate3d(0, 0, 1, 121deg) translate3d(0, 0, 72.3247893456vmin);
+}
+
+.star:nth-of-type(72) {
+  --size: 0.4009822025vmin;
+  --background: #ff2f61;
+  --shadow: 0 0 0.2155965687vmin 0.0789391544vmin #ff4d79;
+  --transform: rotate3d(1, 0, 0, 200deg) rotate3d(0, 1, 0, 29deg) rotate3d(0, 0, 1, 84deg) translate3d(0, 0, 85.7204676868vmin);
+}
+
+.star:nth-of-type(73) {
+  --size: 0.5038002035vmin;
+  --background: #f3eea7;
+  --shadow: 0 0 0.7387975469vmin 0.1209493195vmin #f3eea7;
+  --transform: rotate3d(1, 0, 0, 160deg) rotate3d(0, 1, 0, 312deg) rotate3d(0, 0, 1, 39deg) translate3d(0, 0, 78.8984973433vmin);
+}
+
+.star:nth-of-type(74) {
+  --size: 0.322391987vmin;
+  --background: #e8edf1;
+  --shadow: 0 0 0.4598287061vmin 0.1241924899vmin #f4f7f9;
+  --transform: rotate3d(1, 0, 0, 66deg) rotate3d(0, 1, 0, 285deg) rotate3d(0, 0, 1, 250deg) translate3d(0, 0, 89.8868276497vmin);
+}
+
+.star:nth-of-type(75) {
+  --size: 0.2512510291vmin;
+  --background: #dee6ec;
+  --shadow: 0 0 0.3374825744vmin 0.0065538666vmin #fefefe;
+  --transform: rotate3d(1, 0, 0, 24deg) rotate3d(0, 1, 0, 346deg) rotate3d(0, 0, 1, 279deg) translate3d(0, 0, 79.2529969213vmin);
+}
+
+.star:nth-of-type(76) {
+  --size: 0.2538529777vmin;
+  --background: #5e246c;
+  --shadow: 0 0 0.2941019659vmin 0.0525700956vmin #642674;
+  --transform: rotate3d(1, 0, 0, 256deg) rotate3d(0, 1, 0, 80deg) rotate3d(0, 0, 1, 191deg) translate3d(0, 0, 82.0983557664vmin);
+}
+
+.star:nth-of-type(77) {
+  --size: 0.4401636887vmin;
+  --background: #572164;
+  --shadow: 0 0 0.6214934661vmin 0.2027200199vmin #6b297c;
+  --transform: rotate3d(1, 0, 0, 245deg) rotate3d(0, 1, 0, 311deg) rotate3d(0, 0, 1, 85deg) translate3d(0, 0, 76.2748953279vmin);
+}
+
+.star:nth-of-type(78) {
+  --size: 0.518904717vmin;
+  --background: #fff29e;
+  --shadow: 0 0 0.7635731955vmin 0.0958331743vmin #fff4a8;
+  --transform: rotate3d(1, 0, 0, 103deg) rotate3d(0, 1, 0, 171deg) rotate3d(0, 0, 1, 148deg) translate3d(0, 0, 68.4438322402vmin);
+}
+
+.star:nth-of-type(79) {
+  --size: 0.6571576132vmin;
+  --background: #642674;
+  --shadow: 0 0 0.7163674872vmin 0.2550026937vmin #642674;
+  --transform: rotate3d(1, 0, 0, 349deg) rotate3d(0, 1, 0, 13deg) rotate3d(0, 0, 1, 188deg) translate3d(0, 0, 80.7101695645vmin);
+}
+
+.star:nth-of-type(80) {
+  --size: 0.527861166vmin;
+  --background: #f57474;
+  --shadow: 0 0 0.4641840544vmin 0.0019271159vmin #f79a9a;
+  --transform: rotate3d(1, 0, 0, 81deg) rotate3d(0, 1, 0, 347deg) rotate3d(0, 0, 1, 125deg) translate3d(0, 0, 69.9854691664vmin);
+}
+
+.star:nth-of-type(81) {
+  --size: 0.7173110142vmin;
+  --background: #27b2ee;
+  --shadow: 0 0 0.4299060309vmin 0.2651480234vmin #27b2ee;
+  --transform: rotate3d(1, 0, 0, 297deg) rotate3d(0, 1, 0, 287deg) rotate3d(0, 0, 1, 27deg) translate3d(0, 0, 69.2479403783vmin);
+}
+
+.star:nth-of-type(82) {
+  --size: 0.729641019vmin;
+  --background: #ff76ad;
+  --shadow: 0 0 0.7755311561vmin 0.3102907183vmin #ff80b3;
+  --transform: rotate3d(1, 0, 0, 66deg) rotate3d(0, 1, 0, 32deg) rotate3d(0, 0, 1, 309deg) translate3d(0, 0, 74.4171467908vmin);
+}
+
+.star:nth-of-type(83) {
+  --size: 0.6525212588vmin;
+  --background: #f9af82;
+  --shadow: 0 0 0.5857216508vmin 0.0064787689vmin #f9af82;
+  --transform: rotate3d(1, 0, 0, 35deg) rotate3d(0, 1, 0, 322deg) rotate3d(0, 0, 1, 164deg) translate3d(0, 0, 67.132298363vmin);
+}
+
+.star:nth-of-type(84) {
+  --size: 0.3155100426vmin;
+  --background: #f57979;
+  --shadow: 0 0 0.3391797496vmin 0.0729239021vmin #f79595;
+  --transform: rotate3d(1, 0, 0, 192deg) rotate3d(0, 1, 0, 33deg) rotate3d(0, 0, 1, 226deg) translate3d(0, 0, 81.3797678575vmin);
+}
+
+.star:nth-of-type(85) {
+  --size: 0.337645331vmin;
+  --background: #12a5e4;
+  --shadow: 0 0 0.481304554vmin 0.0687161072vmin #31b6ef;
+  --transform: rotate3d(1, 0, 0, 14deg) rotate3d(0, 1, 0, 48deg) rotate3d(0, 0, 1, 41deg) translate3d(0, 0, 77.156485312vmin);
+}
+
+.star:nth-of-type(86) {
+  --size: 0.6591728104vmin;
+  --background: #f79a60;
+  --shadow: 0 0 0.944985924vmin 0.3027452093vmin #f9b890;
+  --transform: rotate3d(1, 0, 0, 78deg) rotate3d(0, 1, 0, 59deg) rotate3d(0, 0, 1, 254deg) translate3d(0, 0, 84.0423938812vmin);
+}
+
+.star:nth-of-type(87) {
+  --size: 0.2838914956vmin;
+  --background: #eee784;
+  --shadow: 0 0 0.2032195853vmin 0.0068446371vmin #f4efb0;
+  --transform: rotate3d(1, 0, 0, 138deg) rotate3d(0, 1, 0, 180deg) rotate3d(0, 0, 1, 7deg) translate3d(0, 0, 68.7697028525vmin);
+}
+
+.star:nth-of-type(88) {
+  --size: 0.5331993832vmin;
+  --background: #ebf0f3;
+  --shadow: 0 0 0.7035757107vmin 0.1601349632vmin #f1f4f7;
+  --transform: rotate3d(1, 0, 0, 356deg) rotate3d(0, 1, 0, 253deg) rotate3d(0, 0, 1, 315deg) translate3d(0, 0, 67.7761955vmin);
+}
+
+.star:nth-of-type(89) {
+  --size: 0.5435894432vmin;
+  --background: #fff6bd;
+  --shadow: 0 0 0.797721057vmin 0.213365253vmin #fff6bd;
+  --transform: rotate3d(1, 0, 0, 159deg) rotate3d(0, 1, 0, 48deg) rotate3d(0, 0, 1, 107deg) translate3d(0, 0, 71.8611434079vmin);
+}
+
+.star:nth-of-type(90) {
+  --size: 0.2789100344vmin;
+  --background: #f46f6f;
+  --shadow: 0 0 0.3196135292vmin 0.0629046625vmin #f89f9f;
+  --transform: rotate3d(1, 0, 0, 149deg) rotate3d(0, 1, 0, 215deg) rotate3d(0, 0, 1, 234deg) translate3d(0, 0, 85.0801536462vmin);
+}
+
+.star:nth-of-type(91) {
+  --size: 0.3208128218vmin;
+  --background: #5e5af2;
+  --shadow: 0 0 0.444897282vmin 0.0958317592vmin #8c8af6;
+  --transform: rotate3d(1, 0, 0, 306deg) rotate3d(0, 1, 0, 87deg) rotate3d(0, 0, 1, 346deg) translate3d(0, 0, 76.6158065208vmin);
+}
+
+.star:nth-of-type(92) {
+  --size: 0.5287948322vmin;
+  --background: #13a9e9;
+  --shadow: 0 0 0.6200606463vmin 0.1107448479vmin #2cb4ee;
+  --transform: rotate3d(1, 0, 0, 4deg) rotate3d(0, 1, 0, 226deg) rotate3d(0, 0, 1, 6deg) translate3d(0, 0, 85.7103105316vmin);
+}
+
+.star:nth-of-type(93) {
+  --size: 0.6240498363vmin;
+  --background: #ff62a1;
+  --shadow: 0 0 0.877182383vmin 0.1847424951vmin #ff95bf;
+  --transform: rotate3d(1, 0, 0, 85deg) rotate3d(0, 1, 0, 309deg) rotate3d(0, 0, 1, 302deg) translate3d(0, 0, 78.9467807389vmin);
+}
+
+.star:nth-of-type(94) {
+  --size: 0.3449673134vmin;
+  --background: #12a2e0;
+  --shadow: 0 0 0.4181607496vmin 0.0780889337vmin #36b7ef;
+  --transform: rotate3d(1, 0, 0, 37deg) rotate3d(0, 1, 0, 301deg) rotate3d(0, 0, 1, 210deg) translate3d(0, 0, 70.8693232848vmin);
+}
+
+.star:nth-of-type(95) {
+  --size: 0.5863003882vmin;
+  --background: #f8a673;
+  --shadow: 0 0 0.3869423657vmin 0.1025911294vmin #f8ac7d;
+  --transform: rotate3d(1, 0, 0, 132deg) rotate3d(0, 1, 0, 286deg) rotate3d(0, 0, 1, 209deg) translate3d(0, 0, 72.353871498vmin);
+}
+
+.star:nth-of-type(96) {
+  --size: 0.6403999408vmin;
+  --background: #ff4371;
+  --shadow: 0 0 0.6877842584vmin 0.0173299144vmin #ff4371;
+  --transform: rotate3d(1, 0, 0, 242deg) rotate3d(0, 1, 0, 225deg) rotate3d(0, 0, 1, 227deg) translate3d(0, 0, 73.515910063vmin);
+}
+
+.star:nth-of-type(97) {
+  --size: 0.5883792388vmin;
+  --background: #f57474;
+  --shadow: 0 0 0.6251725549vmin 0.1251215149vmin #f79a9a;
+  --transform: rotate3d(1, 0, 0, 274deg) rotate3d(0, 1, 0, 271deg) rotate3d(0, 0, 1, 319deg) translate3d(0, 0, 65.4953932949vmin);
+}
+
+.star:nth-of-type(98) {
+  --size: 0.527169823vmin;
+  --background: #f68c8c;
+  --shadow: 0 0 0.5463073281vmin 0.2013524859vmin #f68c8c;
+  --transform: rotate3d(1, 0, 0, 54deg) rotate3d(0, 1, 0, 62deg) rotate3d(0, 0, 1, 152deg) translate3d(0, 0, 76.4204388415vmin);
+}
+
+.star:nth-of-type(99) {
+  --size: 0.6709008508vmin;
+  --background: #15acec;
+  --shadow: 0 0 0.8218730194vmin 0.3257682601vmin #27b2ee;
+  --transform: rotate3d(1, 0, 0, 231deg) rotate3d(0, 1, 0, 128deg) rotate3d(0, 0, 1, 25deg) translate3d(0, 0, 71.6958122785vmin);
+}
+
+.star:nth-of-type(100) {
+  --size: 0.4355329406vmin;
+  --background: #fff4ad;
+  --shadow: 0 0 0.4270818287vmin 0.0163815659vmin #fff4ad;
+  --transform: rotate3d(1, 0, 0, 129deg) rotate3d(0, 1, 0, 273deg) rotate3d(0, 0, 1, 151deg) translate3d(0, 0, 66.1473023161vmin);
+}
+
+.star:nth-of-type(101) {
+  --size: 0.2940582937vmin;
+  --background: #adf7ae;
+  --shadow: 0 0 0.2260812858vmin 0.0243094359vmin #adf7ae;
+  --transform: rotate3d(1, 0, 0, 313deg) rotate3d(0, 1, 0, 337deg) rotate3d(0, 0, 1, 161deg) translate3d(0, 0, 70.8306546106vmin);
+}
+
+.star:nth-of-type(102) {
+  --size: 0.4953900379vmin;
+  --background: #eee784;
+  --shadow: 0 0 0.5806451874vmin 0.0280731498vmin #f4efb0;
+  --transform: rotate3d(1, 0, 0, 276deg) rotate3d(0, 1, 0, 109deg) rotate3d(0, 0, 1, 251deg) translate3d(0, 0, 73.9826890658vmin);
+}
+
+.star:nth-of-type(103) {
+  --size: 0.4308572682vmin;
+  --background: #f4f7f9;
+  --shadow: 0 0 0.353513609vmin 0.1499099892vmin #f4f7f9;
+  --transform: rotate3d(1, 0, 0, 53deg) rotate3d(0, 1, 0, 28deg) rotate3d(0, 0, 1, 76deg) translate3d(0, 0, 89.9276409805vmin);
+}
+
+.star:nth-of-type(104) {
+  --size: 0.6597958518vmin;
+  --background: #8885f5;
+  --shadow: 0 0 0.3697899365vmin 0.1384415528vmin #8885f5;
+  --transform: rotate3d(1, 0, 0, 68deg) rotate3d(0, 1, 0, 344deg) rotate3d(0, 0, 1, 8deg) translate3d(0, 0, 74.0653185255vmin);
+}
+
+.star:nth-of-type(105) {
+  --size: 0.254098056vmin;
+  --background: #ff527c;
+  --shadow: 0 0 0.2519240355vmin 0.0289149294vmin #ff527c;
+  --transform: rotate3d(1, 0, 0, 41deg) rotate3d(0, 1, 0, 212deg) rotate3d(0, 0, 1, 209deg) translate3d(0, 0, 66.6094367403vmin);
+}
+
+.star:nth-of-type(106) {
+  --size: 0.3669637825vmin;
+  --background: #f9b287;
+  --shadow: 0 0 0.2020342216vmin 0.1779763842vmin #f9b287;
+  --transform: rotate3d(1, 0, 0, 317deg) rotate3d(0, 1, 0, 15deg) rotate3d(0, 0, 1, 267deg) translate3d(0, 0, 80.2599507986vmin);
+}
+
+.star:nth-of-type(107) {
+  --size: 0.5898631722vmin;
+  --background: #fefefe;
+  --shadow: 0 0 0.4955423649vmin 0.0223589171vmin #fefefe;
+  --transform: rotate3d(1, 0, 0, 145deg) rotate3d(0, 1, 0, 57deg) rotate3d(0, 0, 1, 12deg) translate3d(0, 0, 77.1965130529vmin);
+}
+
+.star:nth-of-type(108) {
+  --size: 0.7025897231vmin;
+  --background: #13a9e9;
+  --shadow: 0 0 0.4337269959vmin 0.0472701756vmin #2cb4ee;
+  --transform: rotate3d(1, 0, 0, 76deg) rotate3d(0, 1, 0, 249deg) rotate3d(0, 0, 1, 334deg) translate3d(0, 0, 80.4569507699vmin);
+}
+
+.star:nth-of-type(109) {
+  --size: 0.260756449vmin;
+  --background: #f3eea7;
+  --shadow: 0 0 0.3223361721vmin 0.0151438967vmin #f3eea7;
+  --transform: rotate3d(1, 0, 0, 54deg) rotate3d(0, 1, 0, 352deg) rotate3d(0, 0, 1, 113deg) translate3d(0, 0, 87.2873788712vmin);
+}
+
+.star:nth-of-type(110) {
+  --size: 0.7179712623vmin;
+  --background: #fff4ad;
+  --shadow: 0 0 0.455730349vmin 0.0963612853vmin #fff4ad;
+  --transform: rotate3d(1, 0, 0, 74deg) rotate3d(0, 1, 0, 31deg) rotate3d(0, 0, 1, 123deg) translate3d(0, 0, 83.9342739536vmin);
+}
+
+.star:nth-of-type(111) {
+  --size: 0.3115510805vmin;
+  --background: #f46f6f;
+  --shadow: 0 0 0.3454354873vmin 0.0793295504vmin #f89f9f;
+  --transform: rotate3d(1, 0, 0, 304deg) rotate3d(0, 1, 0, 260deg) rotate3d(0, 0, 1, 103deg) translate3d(0, 0, 83.2970364208vmin);
+}
+
+.star:nth-of-type(112) {
+  --size: 0.7473909203vmin;
+  --background: #ff527c;
+  --shadow: 0 0 0.5700500951vmin 0.116077314vmin #ff527c;
+  --transform: rotate3d(1, 0, 0, 5deg) rotate3d(0, 1, 0, 284deg) rotate3d(0, 0, 1, 139deg) translate3d(0, 0, 73.3505393163vmin);
+}
+
+.star:nth-of-type(113) {
+  --size: 0.3705991177vmin;
+  --background: #f57e7e;
+  --shadow: 0 0 0.4839364426vmin 0.1767047991vmin #f79090;
+  --transform: rotate3d(1, 0, 0, 277deg) rotate3d(0, 1, 0, 116deg) rotate3d(0, 0, 1, 118deg) translate3d(0, 0, 75.4818095549vmin);
+}
+
+.star:nth-of-type(114) {
+  --size: 0.7131004635vmin;
+  --background: #ff95bf;
+  --shadow: 0 0 0.9510799354vmin 0.2683257357vmin #ff95bf;
+  --transform: rotate3d(1, 0, 0, 16deg) rotate3d(0, 1, 0, 97deg) rotate3d(0, 0, 1, 36deg) translate3d(0, 0, 79.2575289586vmin);
+}
+
+.star:nth-of-type(115) {
+  --size: 0.5295627565vmin;
+  --background: #f79a9a;
+  --shadow: 0 0 0.5396122146vmin 0.2088795218vmin #f79a9a;
+  --transform: rotate3d(1, 0, 0, 175deg) rotate3d(0, 1, 0, 238deg) rotate3d(0, 0, 1, 288deg) translate3d(0, 0, 70.3148778459vmin);
+}
+
+.star:nth-of-type(116) {
+  --size: 0.4153815638vmin;
+  --background: #91f493;
+  --shadow: 0 0 0.2560773567vmin 0.1965614034vmin #b7f8b7;
+  --transform: rotate3d(1, 0, 0, 232deg) rotate3d(0, 1, 0, 206deg) rotate3d(0, 0, 1, 235deg) translate3d(0, 0, 74.7422074615vmin);
+}
+
+.star:nth-of-type(117) {
+  --size: 0.4791157284vmin;
+  --background: #91f493;
+  --shadow: 0 0 0.3852375713vmin 0.1176745846vmin #b7f8b7;
+  --transform: rotate3d(1, 0, 0, 164deg) rotate3d(0, 1, 0, 336deg) rotate3d(0, 0, 1, 102deg) translate3d(0, 0, 67.9896207696vmin);
+}
+
+.star:nth-of-type(118) {
+  --size: 0.7119006784vmin;
+  --background: #8885f5;
+  --shadow: 0 0 0.3706367049vmin 0.098332394vmin #8885f5;
+  --transform: rotate3d(1, 0, 0, 273deg) rotate3d(0, 1, 0, 252deg) rotate3d(0, 0, 1, 341deg) translate3d(0, 0, 85.102128726vmin);
+}
+
+.star:nth-of-type(119) {
+  --size: 0.5845456519vmin;
+  --background: #6c69f3;
+  --shadow: 0 0 0.6961585165vmin 0.149800332vmin #7e7bf5;
+  --transform: rotate3d(1, 0, 0, 30deg) rotate3d(0, 1, 0, 196deg) rotate3d(0, 0, 1, 281deg) translate3d(0, 0, 78.35818313vmin);
+}
+
+.star:nth-of-type(120) {
+  --size: 0.2688657636vmin;
+  --background: #ec2d99;
+  --shadow: 0 0 0.2055246649vmin 0.105154111vmin #ec2d99;
+  --transform: rotate3d(1, 0, 0, 359deg) rotate3d(0, 1, 0, 10deg) rotate3d(0, 0, 1, 29deg) translate3d(0, 0, 89.8185433622vmin);
+}
+
+.star:nth-of-type(121) {
+  --size: 0.565860969vmin;
+  --background: #fff194;
+  --shadow: 0 0 0.4436652178vmin 0.0831826793vmin #fff5b2;
+  --transform: rotate3d(1, 0, 0, 233deg) rotate3d(0, 1, 0, 113deg) rotate3d(0, 0, 1, 195deg) translate3d(0, 0, 70.5762534108vmin);
+}
+
+.star:nth-of-type(122) {
+  --size: 0.5673606571vmin;
+  --background: #ff76ad;
+  --shadow: 0 0 0.4956630698vmin 0.0265084444vmin #ff80b3;
+  --transform: rotate3d(1, 0, 0, 171deg) rotate3d(0, 1, 0, 187deg) rotate3d(0, 0, 1, 78deg) translate3d(0, 0, 67.783783694vmin);
+}
+
+.star:nth-of-type(123) {
+  --size: 0.7398141211vmin;
+  --background: #f79090;
+  --shadow: 0 0 0.9168583733vmin 0.0747021462vmin #f79090;
+  --transform: rotate3d(1, 0, 0, 288deg) rotate3d(0, 1, 0, 149deg) rotate3d(0, 0, 1, 39deg) translate3d(0, 0, 71.5470741354vmin);
+}
+
+.star:nth-of-type(124) {
+  --size: 0.3774916559vmin;
+  --background: #7e7bf5;
+  --shadow: 0 0 0.4400679479vmin 0.0378531291vmin #7e7bf5;
+  --transform: rotate3d(1, 0, 0, 134deg) rotate3d(0, 1, 0, 268deg) rotate3d(0, 0, 1, 139deg) translate3d(0, 0, 65.1021286579vmin);
+}
+
+.star:nth-of-type(125) {
+  --size: 0.5468544464vmin;
+  --background: #501f5d;
+  --shadow: 0 0 0.7658094809vmin 0.1216904121vmin #722b83;
+  --transform: rotate3d(1, 0, 0, 3deg) rotate3d(0, 1, 0, 199deg) rotate3d(0, 0, 1, 273deg) translate3d(0, 0, 87.9945196094vmin);
+}
+
+.star:nth-of-type(126) {
+  --size: 0.5021421204vmin;
+  --background: #ff5880;
+  --shadow: 0 0 0.6534292444vmin 0.0336267882vmin #ff5880;
+  --transform: rotate3d(1, 0, 0, 89deg) rotate3d(0, 1, 0, 195deg) rotate3d(0, 0, 1, 64deg) translate3d(0, 0, 82.4534850577vmin);
+}
+
+.star:nth-of-type(127) {
+  --size: 0.3719012552vmin;
+  --background: #f8a673;
+  --shadow: 0 0 0.2432399339vmin 0.068105469vmin #f8ac7d;
+  --transform: rotate3d(1, 0, 0, 247deg) rotate3d(0, 1, 0, 76deg) rotate3d(0, 0, 1, 1deg) translate3d(0, 0, 79.4403734538vmin);
+}
+
+.star:nth-of-type(128) {
+  --size: 0.5475683773vmin;
+  --background: #f79a60;
+  --shadow: 0 0 0.6487286718vmin 0.0225486439vmin #f9b890;
+  --transform: rotate3d(1, 0, 0, 258deg) rotate3d(0, 1, 0, 92deg) rotate3d(0, 0, 1, 265deg) translate3d(0, 0, 66.3305514768vmin);
+}
+
+.star:nth-of-type(129) {
+  --size: 0.3951916921vmin;
+  --background: #23b1ed;
+  --shadow: 0 0 0.4443155453vmin 0.0512405247vmin #23b1ed;
+  --transform: rotate3d(1, 0, 0, 290deg) rotate3d(0, 1, 0, 109deg) rotate3d(0, 0, 1, 2deg) translate3d(0, 0, 84.8567570636vmin);
+}
+
+.star:nth-of-type(130) {
+  --size: 0.48237135vmin;
+  --background: #fff299;
+  --shadow: 0 0 0.5412749126vmin 0.1311959008vmin #fff4ad;
+  --transform: rotate3d(1, 0, 0, 276deg) rotate3d(0, 1, 0, 38deg) rotate3d(0, 0, 1, 16deg) translate3d(0, 0, 66.9595625075vmin);
+}
+
+.star:nth-of-type(131) {
+  --size: 0.7119473959vmin;
+  --background: #bbf8bc;
+  --shadow: 0 0 0.8920436985vmin 0.0030703935vmin #bbf8bc;
+  --transform: rotate3d(1, 0, 0, 211deg) rotate3d(0, 1, 0, 218deg) rotate3d(0, 0, 1, 193deg) translate3d(0, 0, 65.5385478374vmin);
+}
+
+.star:nth-of-type(132) {
+  --size: 0.3202633873vmin;
+  --background: #f57474;
+  --shadow: 0 0 0.2694503853vmin 0.0487318274vmin #f79a9a;
+  --transform: rotate3d(1, 0, 0, 254deg) rotate3d(0, 1, 0, 100deg) rotate3d(0, 0, 1, 185deg) translate3d(0, 0, 83.0729836386vmin);
+}
+
+.star:nth-of-type(133) {
+  --size: 0.3693512308vmin;
+  --background: #ff8fbc;
+  --shadow: 0 0 0.3424377512vmin 0.1367813444vmin #ff8fbc;
+  --transform: rotate3d(1, 0, 0, 307deg) rotate3d(0, 1, 0, 81deg) rotate3d(0, 0, 1, 140deg) translate3d(0, 0, 65.3529131171vmin);
+}
+
+.star:nth-of-type(134) {
+  --size: 0.5674485667vmin;
+  --background: #6b297c;
+  --shadow: 0 0 0.5944878812vmin 0.1474451957vmin #6b297c;
+  --transform: rotate3d(1, 0, 0, 156deg) rotate3d(0, 1, 0, 353deg) rotate3d(0, 0, 1, 192deg) translate3d(0, 0, 77.1282702157vmin);
+}
+
+.star:nth-of-type(135) {
+  --size: 0.4252676639vmin;
+  --background: #fefefe;
+  --shadow: 0 0 0.6265593126vmin 0.0892728194vmin #fefefe;
+  --transform: rotate3d(1, 0, 0, 181deg) rotate3d(0, 1, 0, 14deg) rotate3d(0, 0, 1, 154deg) translate3d(0, 0, 68.6388693294vmin);
+}
+
+.star:nth-of-type(136) {
+  --size: 0.3937178438vmin;
+  --background: #9bf59c;
+  --shadow: 0 0 0.2135286606vmin 0.1912116271vmin #adf7ae;
+  --transform: rotate3d(1, 0, 0, 186deg) rotate3d(0, 1, 0, 13deg) rotate3d(0, 0, 1, 217deg) translate3d(0, 0, 68.0044759771vmin);
+}
+
+.star:nth-of-type(137) {
+  --size: 0.5393671691vmin;
+  --background: #f7a36e;
+  --shadow: 0 0 0.6261441979vmin 0.1069635426vmin #f9af82;
+  --transform: rotate3d(1, 0, 0, 8deg) rotate3d(0, 1, 0, 36deg) rotate3d(0, 0, 1, 105deg) translate3d(0, 0, 74.0180205218vmin);
+}
+
+.star:nth-of-type(138) {
+  --size: 0.7013405457vmin;
+  --background: #f8a673;
+  --shadow: 0 0 0.8007306891vmin 0.0216215527vmin #f8ac7d;
+  --transform: rotate3d(1, 0, 0, 62deg) rotate3d(0, 1, 0, 307deg) rotate3d(0, 0, 1, 86deg) translate3d(0, 0, 87.5142917006vmin);
+}
+
+.star:nth-of-type(139) {
+  --size: 0.440666097vmin;
+  --background: #572164;
+  --shadow: 0 0 0.2429337798vmin 0.0755378402vmin #6b297c;
+  --transform: rotate3d(1, 0, 0, 244deg) rotate3d(0, 1, 0, 111deg) rotate3d(0, 0, 1, 54deg) translate3d(0, 0, 76.5048763626vmin);
+}
+
+.star:nth-of-type(140) {
+  --size: 0.5083180472vmin;
+  --background: #f9b287;
+  --shadow: 0 0 0.6392046079vmin 0.2261197001vmin #f9b287;
+  --transform: rotate3d(1, 0, 0, 95deg) rotate3d(0, 1, 0, 207deg) rotate3d(0, 0, 1, 223deg) translate3d(0, 0, 78.4308620961vmin);
+}
+
+.star:nth-of-type(141) {
+  --size: 0.5745439119vmin;
+  --background: #f8ac7d;
+  --shadow: 0 0 0.5477029053vmin 0.0824357941vmin #f8ac7d;
+  --transform: rotate3d(1, 0, 0, 357deg) rotate3d(0, 1, 0, 65deg) rotate3d(0, 0, 1, 335deg) translate3d(0, 0, 71.5790550648vmin);
+}
+
+.star:nth-of-type(142) {
+  --size: 0.5819131075vmin;
+  --background: #6c69f3;
+  --shadow: 0 0 0.5865833062vmin 0.1163282549vmin #7e7bf5;
+  --transform: rotate3d(1, 0, 0, 282deg) rotate3d(0, 1, 0, 7deg) rotate3d(0, 0, 1, 213deg) translate3d(0, 0, 69.9660126623vmin);
+}
+
+.star:nth-of-type(143) {
+  --size: 0.4493367881vmin;
+  --background: #f8ac7d;
+  --shadow: 0 0 0.5997309208vmin 0.0153997267vmin #f8ac7d;
+  --transform: rotate3d(1, 0, 0, 113deg) rotate3d(0, 1, 0, 129deg) rotate3d(0, 0, 1, 280deg) translate3d(0, 0, 84.900686543vmin);
+}
+
+.star:nth-of-type(144) {
+  --size: 0.5186654989vmin;
+  --background: #eb2495;
+  --shadow: 0 0 0.7117792794vmin 0.0910421857vmin #eb2495;
+  --transform: rotate3d(1, 0, 0, 118deg) rotate3d(0, 1, 0, 72deg) rotate3d(0, 0, 1, 238deg) translate3d(0, 0, 69.3100938892vmin);
+}
+
+.star:nth-of-type(145) {
+  --size: 0.2846511632vmin;
+  --background: #ea1b90;
+  --shadow: 0 0 0.3078698597vmin 0.0690684863vmin #ea1b90;
+  --transform: rotate3d(1, 0, 0, 97deg) rotate3d(0, 1, 0, 105deg) rotate3d(0, 0, 1, 246deg) translate3d(0, 0, 67.113061351vmin);
+}
+
+.star:nth-of-type(146) {
+  --size: 0.745448097vmin;
+  --background: #ff2a5e;
+  --shadow: 0 0 0.6753031105vmin 0.0574525588vmin #ff527c;
+  --transform: rotate3d(1, 0, 0, 104deg) rotate3d(0, 1, 0, 88deg) rotate3d(0, 0, 1, 88deg) translate3d(0, 0, 83.9759630931vmin);
+}
+
+.star:nth-of-type(147) {
+  --size: 0.2748496321vmin;
+  --background: #ff4371;
+  --shadow: 0 0 0.3982082352vmin 0.0248214332vmin #ff4371;
+  --transform: rotate3d(1, 0, 0, 174deg) rotate3d(0, 1, 0, 99deg) rotate3d(0, 0, 1, 65deg) translate3d(0, 0, 81.8907295916vmin);
+}
+
+.star:nth-of-type(148) {
+  --size: 0.6064014241vmin;
+  --background: #13a9e9;
+  --shadow: 0 0 0.3707498195vmin 0.2839859823vmin #2cb4ee;
+  --transform: rotate3d(1, 0, 0, 79deg) rotate3d(0, 1, 0, 43deg) rotate3d(0, 0, 1, 115deg) translate3d(0, 0, 65.6962808765vmin);
+}
+
+.star:nth-of-type(149) {
+  --size: 0.628392344vmin;
+  --background: #9ff6a0;
+  --shadow: 0 0 0.7702688646vmin 0.1630364376vmin #a9f6aa;
+  --transform: rotate3d(1, 0, 0, 191deg) rotate3d(0, 1, 0, 181deg) rotate3d(0, 0, 1, 152deg) translate3d(0, 0, 83.247296726vmin);
+}
+
+.star:nth-of-type(150) {
+  --size: 0.2766899835vmin;
+  --background: #8df48e;
+  --shadow: 0 0 0.1796252066vmin 0.0938496762vmin #bbf8bc;
+  --transform: rotate3d(1, 0, 0, 257deg) rotate3d(0, 1, 0, 88deg) rotate3d(0, 0, 1, 11deg) translate3d(0, 0, 84.1609551058vmin);
+}
+
+.star:nth-of-type(151) {
+  --size: 0.5985997356vmin;
+  --background: #efe788;
+  --shadow: 0 0 0.7412898525vmin 0.2372142826vmin #f3efac;
+  --transform: rotate3d(1, 0, 0, 100deg) rotate3d(0, 1, 0, 72deg) rotate3d(0, 0, 1, 3deg) translate3d(0, 0, 77.3391130618vmin);
+}
+
+.star:nth-of-type(152) {
+  --size: 0.6833124672vmin;
+  --background: #5e5af2;
+  --shadow: 0 0 0.6748761952vmin 0.2815791292vmin #8c8af6;
+  --transform: rotate3d(1, 0, 0, 158deg) rotate3d(0, 1, 0, 266deg) rotate3d(0, 0, 1, 125deg) translate3d(0, 0, 69.8099636989vmin);
+}
+
+.star:nth-of-type(153) {
+  --size: 0.3244482772vmin;
+  --background: #8df48e;
+  --shadow: 0 0 0.4776511777vmin 0.0506765488vmin #bbf8bc;
+  --transform: rotate3d(1, 0, 0, 334deg) rotate3d(0, 1, 0, 183deg) rotate3d(0, 0, 1, 38deg) translate3d(0, 0, 65.1480188818vmin);
+}
+
+.star:nth-of-type(154) {
+  --size: 0.5865015391vmin;
+  --background: #31b6ef;
+  --shadow: 0 0 0.4587519476vmin 0.2907358496vmin #31b6ef;
+  --transform: rotate3d(1, 0, 0, 245deg) rotate3d(0, 1, 0, 83deg) rotate3d(0, 0, 1, 224deg) translate3d(0, 0, 79.2115754713vmin);
+}
+
+.star:nth-of-type(155) {
+  --size: 0.6418164986vmin;
+  --background: #fff4ad;
+  --shadow: 0 0 0.8742652656vmin 0.3044098021vmin #fff4ad;
+  --transform: rotate3d(1, 0, 0, 220deg) rotate3d(0, 1, 0, 158deg) rotate3d(0, 0, 1, 183deg) translate3d(0, 0, 82.3471701327vmin);
+}
+
+.star:nth-of-type(156) {
+  --size: 0.3924210031vmin;
+  --background: #f79090;
+  --shadow: 0 0 0.2401290961vmin 0.1526627088vmin #f79090;
+  --transform: rotate3d(1, 0, 0, 26deg) rotate3d(0, 1, 0, 91deg) rotate3d(0, 0, 1, 135deg) translate3d(0, 0, 72.35430446vmin);
+}
+
+.star:nth-of-type(157) {
+  --size: 0.6468524174vmin;
+  --background: #9bf59c;
+  --shadow: 0 0 0.6649009017vmin 0.0525220307vmin #adf7ae;
+  --transform: rotate3d(1, 0, 0, 1deg) rotate3d(0, 1, 0, 159deg) rotate3d(0, 0, 1, 125deg) translate3d(0, 0, 80.5067111782vmin);
+}
+
+.star:nth-of-type(158) {
+  --size: 0.3323539122vmin;
+  --background: #fff194;
+  --shadow: 0 0 0.3566276937vmin 0.1530056284vmin #fff5b2;
+  --transform: rotate3d(1, 0, 0, 353deg) rotate3d(0, 1, 0, 13deg) rotate3d(0, 0, 1, 126deg) translate3d(0, 0, 72.1166511483vmin);
+}
+
+.star:nth-of-type(159) {
+  --size: 0.31646009vmin;
+  --background: #f4f7f9;
+  --shadow: 0 0 0.1981216305vmin 0.0926125405vmin #f4f7f9;
+  --transform: rotate3d(1, 0, 0, 86deg) rotate3d(0, 1, 0, 178deg) rotate3d(0, 0, 1, 230deg) translate3d(0, 0, 78.1899931809vmin);
+}
+
+.star:nth-of-type(160) {
+  --size: 0.3373672261vmin;
+  --background: #f0e991;
+  --shadow: 0 0 0.3284723873vmin 0.11252101vmin #f2eda3;
+  --transform: rotate3d(1, 0, 0, 23deg) rotate3d(0, 1, 0, 272deg) rotate3d(0, 0, 1, 145deg) translate3d(0, 0, 76.3833848917vmin);
+}
+
+.star:nth-of-type(161) {
+  --size: 0.6597139671vmin;
+  --background: #fff194;
+  --shadow: 0 0 0.348364956vmin 0.175144739vmin #fff5b2;
+  --transform: rotate3d(1, 0, 0, 179deg) rotate3d(0, 1, 0, 202deg) rotate3d(0, 0, 1, 76deg) translate3d(0, 0, 85.609557274vmin);
+}
+
+.star:nth-of-type(162) {
+  --size: 0.4720650544vmin;
+  --background: #ff95bf;
+  --shadow: 0 0 0.6544027222vmin 0.0199667713vmin #ff95bf;
+  --transform: rotate3d(1, 0, 0, 160deg) rotate3d(0, 1, 0, 285deg) rotate3d(0, 0, 1, 265deg) translate3d(0, 0, 77.8912766018vmin);
+}
+
+.star:nth-of-type(163) {
+  --size: 0.6504635179vmin;
+  --background: #f9b58b;
+  --shadow: 0 0 0.3600429363vmin 0.2166635323vmin #f9b58b;
+  --transform: rotate3d(1, 0, 0, 118deg) rotate3d(0, 1, 0, 225deg) rotate3d(0, 0, 1, 40deg) translate3d(0, 0, 71.8222777094vmin);
+}
+
+.star:nth-of-type(164) {
+  --size: 0.5325199865vmin;
+  --background: #12a2e0;
+  --shadow: 0 0 0.4454094924vmin 0.0852077867vmin #36b7ef;
+  --transform: rotate3d(1, 0, 0, 217deg) rotate3d(0, 1, 0, 192deg) rotate3d(0, 0, 1, 353deg) translate3d(0, 0, 86.4416174817vmin);
+}
+
+.star:nth-of-type(165) {
+  --size: 0.4968343895vmin;
+  --background: #722b83;
+  --shadow: 0 0 0.5027812162vmin 0.0309032529vmin #722b83;
+  --transform: rotate3d(1, 0, 0, 310deg) rotate3d(0, 1, 0, 214deg) rotate3d(0, 0, 1, 104deg) translate3d(0, 0, 74.250386032vmin);
+}
+
+.star:nth-of-type(166) {
+  --size: 0.4070272702vmin;
+  --background: #8c8af6;
+  --shadow: 0 0 0.3348557376vmin 0.0470772996vmin #8c8af6;
+  --transform: rotate3d(1, 0, 0, 74deg) rotate3d(0, 1, 0, 208deg) rotate3d(0, 0, 1, 28deg) translate3d(0, 0, 79.2312556205vmin);
+}
+
+.star:nth-of-type(167) {
+  --size: 0.5998247757vmin;
+  --background: #23b1ed;
+  --shadow: 0 0 0.8733473762vmin 0.0167294498vmin #23b1ed;
+  --transform: rotate3d(1, 0, 0, 201deg) rotate3d(0, 1, 0, 180deg) rotate3d(0, 0, 1, 185deg) translate3d(0, 0, 66.1833883329vmin);
+}
+
+.star:nth-of-type(168) {
+  --size: 0.3205347313vmin;
+  --background: #2cb4ee;
+  --shadow: 0 0 0.4741132217vmin 0.0190354755vmin #2cb4ee;
+  --transform: rotate3d(1, 0, 0, 65deg) rotate3d(0, 1, 0, 217deg) rotate3d(0, 0, 1, 56deg) translate3d(0, 0, 80.3969031422vmin);
+}
+
+.star:nth-of-type(169) {
+  --size: 0.7090341137vmin;
+  --background: #91f493;
+  --shadow: 0 0 0.4300248122vmin 0.108613794vmin #b7f8b7;
+  --transform: rotate3d(1, 0, 0, 7deg) rotate3d(0, 1, 0, 55deg) rotate3d(0, 0, 1, 105deg) translate3d(0, 0, 76.736415884vmin);
+}
+
+.star:nth-of-type(170) {
+  --size: 0.7391062072vmin;
+  --background: #6c69f3;
+  --shadow: 0 0 0.898611915vmin 0.1256507575vmin #7e7bf5;
+  --transform: rotate3d(1, 0, 0, 247deg) rotate3d(0, 1, 0, 264deg) rotate3d(0, 0, 1, 77deg) translate3d(0, 0, 66.7895773037vmin);
+}
+
+.star:nth-of-type(171) {
+  --size: 0.3733028621vmin;
+  --background: #ff95bf;
+  --shadow: 0 0 0.2911786461vmin 0.0309409998vmin #ff95bf;
+  --transform: rotate3d(1, 0, 0, 289deg) rotate3d(0, 1, 0, 334deg) rotate3d(0, 0, 1, 305deg) translate3d(0, 0, 66.4539259776vmin);
+}
+
+.star:nth-of-type(172) {
+  --size: 0.4891868121vmin;
+  --background: #ff2a5e;
+  --shadow: 0 0 0.2594703003vmin 0.2227761378vmin #ff527c;
+  --transform: rotate3d(1, 0, 0, 195deg) rotate3d(0, 1, 0, 143deg) rotate3d(0, 0, 1, 317deg) translate3d(0, 0, 87.9635708843vmin);
+}
+
+.star:nth-of-type(173) {
+  --size: 0.4119280924vmin;
+  --background: #6e2a7f;
+  --shadow: 0 0 0.4685372869vmin 0.0938892954vmin #6e2a7f;
+  --transform: rotate3d(1, 0, 0, 323deg) rotate3d(0, 1, 0, 234deg) rotate3d(0, 0, 1, 278deg) translate3d(0, 0, 80.6341952765vmin);
+}
+
+.star:nth-of-type(174) {
+  --size: 0.4261297333vmin;
+  --background: #f68282;
+  --shadow: 0 0 0.3633210596vmin 0.147554465vmin #f68c8c;
+  --transform: rotate3d(1, 0, 0, 85deg) rotate3d(0, 1, 0, 183deg) rotate3d(0, 0, 1, 108deg) translate3d(0, 0, 79.0180212698vmin);
+}
+
+.star:nth-of-type(175) {
+  --size: 0.593472091vmin;
+  --background: #e8edf1;
+  --shadow: 0 0 0.8574128853vmin 0.0660091617vmin #f4f7f9;
+  --transform: rotate3d(1, 0, 0, 298deg) rotate3d(0, 1, 0, 229deg) rotate3d(0, 0, 1, 297deg) translate3d(0, 0, 77.2810004248vmin);
+}
+
+.star:nth-of-type(176) {
+  --size: 0.6560468139vmin;
+  --background: #fff29e;
+  --shadow: 0 0 0.9717613786vmin 0.1643923695vmin #fff4a8;
+  --transform: rotate3d(1, 0, 0, 304deg) rotate3d(0, 1, 0, 177deg) rotate3d(0, 0, 1, 272deg) translate3d(0, 0, 72.6681074102vmin);
+}
+
+.star:nth-of-type(177) {
+  --size: 0.3664586186vmin;
+  --background: #fff6b7;
+  --shadow: 0 0 0.5474307018vmin 0.0966238329vmin #fff6b7;
+  --transform: rotate3d(1, 0, 0, 15deg) rotate3d(0, 1, 0, 0deg) rotate3d(0, 0, 1, 40deg) translate3d(0, 0, 67.3739016491vmin);
+}
+
+.star:nth-of-type(178) {
+  --size: 0.3719079952vmin;
+  --background: #dd1486;
+  --shadow: 0 0 0.3871602498vmin 0.0528767108vmin #eb2495;
+  --transform: rotate3d(1, 0, 0, 346deg) rotate3d(0, 1, 0, 353deg) rotate3d(0, 0, 1, 27deg) translate3d(0, 0, 75.9136830098vmin);
+}
+
+.star:nth-of-type(179) {
+  --size: 0.4075449116vmin;
+  --background: #96f597;
+  --shadow: 0 0 0.5044488594vmin 0.1924779645vmin #b2f7b3;
+  --transform: rotate3d(1, 0, 0, 260deg) rotate3d(0, 1, 0, 259deg) rotate3d(0, 0, 1, 269deg) translate3d(0, 0, 80.1258407661vmin);
+}
+
+.star:nth-of-type(180) {
+  --size: 0.5238080076vmin;
+  --background: #e11488;
+  --shadow: 0 0 0.2685241165vmin 0.0923795318vmin #eb1f93;
+  --transform: rotate3d(1, 0, 0, 105deg) rotate3d(0, 1, 0, 288deg) rotate3d(0, 0, 1, 207deg) translate3d(0, 0, 87.6879280364vmin);
+}
+
+.star:nth-of-type(181) {
+  --size: 0.3418518203vmin;
+  --background: #ff4875;
+  --shadow: 0 0 0.5048192627vmin 0.0070984255vmin #ff4875;
+  --transform: rotate3d(1, 0, 0, 217deg) rotate3d(0, 1, 0, 335deg) rotate3d(0, 0, 1, 7deg) translate3d(0, 0, 81.6643791202vmin);
+}
+
+.star:nth-of-type(182) {
+  --size: 0.600317733vmin;
+  --background: #ff4875;
+  --shadow: 0 0 0.3543092875vmin 0.1147303551vmin #ff4875;
+  --transform: rotate3d(1, 0, 0, 9deg) rotate3d(0, 1, 0, 209deg) rotate3d(0, 0, 1, 217deg) translate3d(0, 0, 69.9904429678vmin);
+}
+
+.star:nth-of-type(183) {
+  --size: 0.6754735366vmin;
+  --background: #ff3465;
+  --shadow: 0 0 0.8190910344vmin 0.2583487273vmin #ff4875;
+  --transform: rotate3d(1, 0, 0, 198deg) rotate3d(0, 1, 0, 198deg) rotate3d(0, 0, 1, 346deg) translate3d(0, 0, 89.2711173049vmin);
+}
+
+.star:nth-of-type(184) {
+  --size: 0.5627646462vmin;
+  --background: #f9af82;
+  --shadow: 0 0 0.4355240663vmin 0.2700558841vmin #f9af82;
+  --transform: rotate3d(1, 0, 0, 312deg) rotate3d(0, 1, 0, 121deg) rotate3d(0, 0, 1, 125deg) translate3d(0, 0, 74.0139585345vmin);
+}
+
+.star:nth-of-type(185) {
+  --size: 0.5615295194vmin;
+  --background: #f89f9f;
+  --shadow: 0 0 0.4778048726vmin 0.2610579147vmin #f89f9f;
+  --transform: rotate3d(1, 0, 0, 270deg) rotate3d(0, 1, 0, 240deg) rotate3d(0, 0, 1, 150deg) translate3d(0, 0, 78.1145554387vmin);
+}
+
+.star:nth-of-type(186) {
+  --size: 0.4251756044vmin;
+  --background: #706df4;
+  --shadow: 0 0 0.3531640583vmin 0.0038865434vmin #7a77f4;
+  --transform: rotate3d(1, 0, 0, 279deg) rotate3d(0, 1, 0, 267deg) rotate3d(0, 0, 1, 319deg) translate3d(0, 0, 73.9649787887vmin);
+}
+
+.star:nth-of-type(187) {
+  --size: 0.5587641734vmin;
+  --background: #682878;
+  --shadow: 0 0 0.7782748645vmin 0.0401161836vmin #682878;
+  --transform: rotate3d(1, 0, 0, 189deg) rotate3d(0, 1, 0, 27deg) rotate3d(0, 0, 1, 284deg) translate3d(0, 0, 71.1183279519vmin);
+}
+
+.star:nth-of-type(188) {
+  --size: 0.4629818137vmin;
+  --background: #d31380;
+  --shadow: 0 0 0.453879265vmin 0.0369628435vmin #ec2d99;
+  --transform: rotate3d(1, 0, 0, 330deg) rotate3d(0, 1, 0, 219deg) rotate3d(0, 0, 1, 330deg) translate3d(0, 0, 67.8878219946vmin);
+}
+
+.star:nth-of-type(189) {
+  --size: 0.6727394318vmin;
+  --background: #ff85b6;
+  --shadow: 0 0 0.9445814215vmin 0.1416075901vmin #ff85b6;
+  --transform: rotate3d(1, 0, 0, 281deg) rotate3d(0, 1, 0, 282deg) rotate3d(0, 0, 1, 192deg) translate3d(0, 0, 66.3508036913vmin);
+}
+
+.star:nth-of-type(190) {
+  --size: 0.293886118vmin;
+  --background: #ff80b3;
+  --shadow: 0 0 0.225978381vmin 0.0494802807vmin #ff80b3;
+  --transform: rotate3d(1, 0, 0, 82deg) rotate3d(0, 1, 0, 160deg) rotate3d(0, 0, 1, 84deg) translate3d(0, 0, 70.0848656599vmin);
+}
+
+.star:nth-of-type(191) {
+  --size: 0.6850639009vmin;
+  --background: #8885f5;
+  --shadow: 0 0 1.0019260133vmin 0.0033618918vmin #8885f5;
+  --transform: rotate3d(1, 0, 0, 200deg) rotate3d(0, 1, 0, 333deg) rotate3d(0, 0, 1, 204deg) translate3d(0, 0, 81.6190344048vmin);
+}
+
+.star:nth-of-type(192) {
+  --size: 0.7300595572vmin;
+  --background: #2cb4ee;
+  --shadow: 0 0 0.3996791804vmin 0.323591439vmin #2cb4ee;
+  --transform: rotate3d(1, 0, 0, 246deg) rotate3d(0, 1, 0, 288deg) rotate3d(0, 0, 1, 216deg) translate3d(0, 0, 66.9326371008vmin);
+}
+
+.star:nth-of-type(193) {
+  --size: 0.5128914731vmin;
+  --background: #ff3969;
+  --shadow: 0 0 0.3378043065vmin 0.1389471885vmin #ff4371;
+  --transform: rotate3d(1, 0, 0, 40deg) rotate3d(0, 1, 0, 37deg) rotate3d(0, 0, 1, 222deg) translate3d(0, 0, 86.8685068066vmin);
+}
+
+.star:nth-of-type(194) {
+  --size: 0.5180731818vmin;
+  --background: #f79d65;
+  --shadow: 0 0 0.5312364761vmin 0.0503144208vmin #f9b58b;
+  --transform: rotate3d(1, 0, 0, 150deg) rotate3d(0, 1, 0, 254deg) rotate3d(0, 0, 1, 297deg) translate3d(0, 0, 66.0184469282vmin);
+}
+
+.star:nth-of-type(195) {
+  --size: 0.4908227975vmin;
+  --background: #f68282;
+  --shadow: 0 0 0.6187544434vmin 0.1989507417vmin #f68c8c;
+  --transform: rotate3d(1, 0, 0, 178deg) rotate3d(0, 1, 0, 310deg) rotate3d(0, 0, 1, 46deg) translate3d(0, 0, 72.004798336vmin);
+}
+
+.star:nth-of-type(196) {
+  --size: 0.2902511725vmin;
+  --background: #ec2997;
+  --shadow: 0 0 0.2620299093vmin 0.0893861923vmin #ec2997;
+  --transform: rotate3d(1, 0, 0, 55deg) rotate3d(0, 1, 0, 18deg) rotate3d(0, 0, 1, 177deg) translate3d(0, 0, 71.9807759735vmin);
+}
+
+.star:nth-of-type(197) {
+  --size: 0.6297574232vmin;
+  --background: #fff08a;
+  --shadow: 0 0 0.7295601333vmin 0.120066613vmin #fff6bd;
+  --transform: rotate3d(1, 0, 0, 302deg) rotate3d(0, 1, 0, 10deg) rotate3d(0, 0, 1, 358deg) translate3d(0, 0, 89.5082403411vmin);
+}
+
+.star:nth-of-type(198) {
+  --size: 0.673347973vmin;
+  --background: #ff255a;
+  --shadow: 0 0 0.8968263173vmin 0.2553848179vmin #ff5880;
+  --transform: rotate3d(1, 0, 0, 67deg) rotate3d(0, 1, 0, 188deg) rotate3d(0, 0, 1, 308deg) translate3d(0, 0, 75.0537451079vmin);
+}
+
+.star:nth-of-type(199) {
+  --size: 0.3696698196vmin;
+  --background: #f57979;
+  --shadow: 0 0 0.4968562209vmin 0.0324237311vmin #f79595;
+  --transform: rotate3d(1, 0, 0, 73deg) rotate3d(0, 1, 0, 249deg) rotate3d(0, 0, 1, 163deg) translate3d(0, 0, 69.3074203222vmin);
+}
+
+.star:nth-of-type(200) {
+  --size: 0.411696944vmin;
+  --background: #b7f8b7;
+  --shadow: 0 0 0.4727227086vmin 0.0876544247vmin #b7f8b7;
+  --transform: rotate3d(1, 0, 0, 330deg) rotate3d(0, 1, 0, 328deg) rotate3d(0, 0, 1, 0deg) translate3d(0, 0, 65.7846004049vmin);
+}
+
+@-webkit-keyframes rotation {
+  100% {
+    -webkit-transform: rotate3d(1, 1, 1, 360deg);
+    transform: rotate3d(1, 1, 1, 360deg);
+  }
+}
+
+@keyframes rotation {
+  100% {
+    -webkit-transform: rotate3d(1, 1, 1, 360deg);
+    transform: rotate3d(1, 1, 1, 360deg);
+  }
+}
+
+@-webkit-keyframes appear {
+  100% {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes appear {
+  100% {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@-webkit-keyframes scale {
+
+  0%,
+  100% {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(0.75, 0.75, 0.75);
+    transform: scale3d(0.75, 0.75, 0.75);
+  }
+}
+
+@keyframes scale {
+
+  0%,
+  100% {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(0.75, 0.75, 0.75);
+    transform: scale3d(0.75, 0.75, 0.75);
+  }
+}
\ No newline at end of file

src/pages/Home/index.module.css

diff --git a/src/pages/Home/index.module.css b/src/pages/Home/index.module.css
new file mode 100644
index 0000000..cf6faa4
--- /dev/null
+++ b/src/pages/Home/index.module.css
@@ -0,0 +1,359 @@
+.homeContainer {
+  padding: 20px;
+  margin-top: 20px;
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  border-radius: 15px;
+  min-height: 100vh;
+}
+
+.searchBarContainer {
+  display: flex;
+  justify-content: center;
+  position: fixed;
+  top: 60px;
+  left: 0;
+  right: 0;
+  /* z-index: 1000; */
+  padding: 10px 0;
+  background: rgba(255, 255, 255, 0.05);
+  min-width: fit-content
+}
+
+.searchInput {
+  width: 80%;
+  padding: 8px;
+  font-size: 18px;
+  max-width: 1000px;
+  border: 2px solid #333;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+  backdrop-filter: blur(5px);
+}
+
+.searchInput:focus {
+  outline: none;
+  border: 2px solid #666;
+  /* 灰色高亮边框 */
+}
+
+
+.secondRow {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.leftBox {
+  margin-left: 20px;
+  flex: 1;
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  max-width: 500px;
+  min-width: 500px;
+  gap: 15px;
+}
+
+.rightCard {
+  flex: 1;
+  padding: 20px;
+  background: linear-gradient(135deg, rgba(26, 26, 46, 0.8), rgba(22, 33, 62, 0.8));
+  /* 星空渐变背景 */
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  max-width: 350px;
+  margin-left: 20px;
+  height: 200px;
+}
+
+.rightCard2 {
+  flex: 1;
+  padding: 10px;
+  background: linear-gradient(135deg, rgba(26, 26, 46, 0.8), rgba(22, 33, 62, 0.8));
+  /* 星空渐变背景 */
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  max-width: 200px;
+  width: 100px;
+  margin-left: 20px;
+  height: 200px;
+}
+
+/* 覆盖Ant Design Card默认样式 */
+.rightCard .ant-card {
+  background: transparent;
+  border-radius: 12px;
+}
+
+.rightCard .ant-card-head {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.rightCard .ant-card-head-title {
+  color: #fff;
+  font-size: 16px;
+}
+
+/* 覆盖Statistic组件样式 */
+.rightCard .ant-statistic-title {
+  color: #a8b2d1;
+  font-size: 12px;
+}
+
+.rightCard .ant-statistic-content-value {
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+/* 覆盖Button组件样式 */
+.rightCard .ant-btn {
+  padding: 10px;
+  background: linear-gradient(135deg, #4a69bd, #6c5ce7);
+  border: none;
+  border-radius: 8px;
+  color: white;
+  font-size: 14px;
+  transition: transform 0.2s;
+}
+
+.rightCard .ant-btn:hover {
+  transform: translateY(-2px);
+  background: linear-gradient(135deg, #3c56a8, #5b4ac7);
+  color: white;
+}
+
+.rightCard .ant-btn-primary {
+  background: linear-gradient(135deg, #6c5ce7, #4a69bd);
+  /* 主按钮颜色调整 */
+}
+
+.statsContainer {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+
+.statItem {
+  flex: 1;
+  padding: 12px;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 8px;
+  text-align: center;
+}
+
+.statTitle {
+  font-size: 12px;
+  color: #a8b2d1;
+  margin-bottom: 4px;
+}
+
+.statValue {
+  font-size: 16px;
+  color: #fff;
+  font-weight: 600;
+}
+
+.buttonGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.actionButton {
+  padding: 10px;
+  background: linear-gradient(135deg, #4a69bd, #6c5ce7);
+  /* 星空蓝紫色渐变 */
+  border: none;
+  border-radius: 8px;
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+
+.actionButton:hover {
+  transform: translateY(-2px);
+  background: linear-gradient(135deg, #3c56a8, #5b4ac7);
+}
+
+.textContent {
+  display: flex;
+
+  flex-direction: column;
+  /* 垂直排列 */
+  width: min-content;
+}
+
+.titlebox {
+  width: 220px;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+.middleBox {
+  margin-left: 20px;
+  flex: 1;
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  max-width: 350px;
+}
+
+.gitAnimation {
+  height: 150px;
+  min-width: 150px;
+  /* 固定动图区域宽度 */
+  /* 保持正方形 */
+  width: 150px;
+  min-width: 150px;
+  border-radius: 8px;
+  /* 移除背景色，使用实际图片 */
+}
+
+.gitSquare {
+  width: 100%;
+  /* 完全填充容器 */
+  height: 100%;
+  object-fit: cover;
+  /* 保持宽高比填充 */
+  border-radius: 8px;
+  min-width: 60px;
+  min-height: 60px;
+}
+
+.rightBox {
+  flex: 1;
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  margin-left: 20px;
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.carouselContainer {
+  overflow: hidden;
+  position: relative;
+}
+
+.carouselItem {
+  padding: 10px 0;
+}
+
+.thirdRow {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 24px;
+  margin-top: 32px;
+}
+
+.postCard {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transition: all 0.3s ease;
+  padding: 16px;
+  min-width: 280px;
+  max-width: 320px;
+  display: flex;
+  flex-direction: column;
+  min-height: 200px;
+}
+
+.cardContent {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+
+.postCard:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+}
+
+.cardContent {
+  display: flex;
+  gap: 16px;
+  width: 100%;
+}
+
+.cardImage {
+  width: 120px;
+  height: 90px;
+  object-fit: cover;
+  border-radius: 8px;
+  background: #f0f0f0;
+}
+
+.infoWrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.postTitle {
+  font-size: 14px;
+  font-weight: 500;
+  color: white;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+}
+
+.postAuthor {
+  font-size: 12px;
+  color: #ddd;
+  margin: 0;
+}
+
+.tagsContainer {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin: 4px 0;
+}
+
+.tag {
+  font-size: 11px;
+  padding: 2px 8px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  color: #eee;
+}
+
+.statsContainer {
+  display: flex;
+  gap: 16px;
+  margin-top: auto;
+}
+
+.statItem {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: #bbb;
+}
\ No newline at end of file

src/pages/Home/index.tsx

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 5f0caa0..7234c32 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,95 +1,413 @@
-import React, { useState } from 'react';
+// 写一个简单的欢迎界面
+import React, { useEffect, useState } from 'react';
+import { Card, Statistic, Row, Col, Divider, Button } from 'antd';
+import { LikeOutlined, HeartOutlined, EyeOutlined } from '@ant-design/icons';
+import { getUserInfo } from '@/services/session';
+import styles from './index.module.css'; // 假设我们创建了一个CSS模块文件
+import './css/stars-style.css'
+import { Flex } from 'antd';
+import { Typography } from "@mui/material";
+import { useRequest } from '@umijs/max';
+import { getPlanetList, updatePlanet, getUserPlanet, getPlanetInfo, PlanetEntity } from '@/services/planets/api';
 
-const planets = [
-    { name: 'Mercury', desc: 'The smallest planet.', img: 'https://images.unsplash.com/photo-1462331940025-496dfbfc7564?auto=format&fit=crop&w=400&q=80' },
-    { name: 'Venus', desc: 'The hottest planet.', img: 'https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=400&q=80' },
-    { name: 'Earth', desc: 'Our home planet.', img: 'https://images.unsplash.com/photo-1465101178521-c1a9136a3b99?auto=format&fit=crop&w=400&q=80' },
-    { name: 'Mars', desc: 'The red planet.', img: 'https://images.unsplash.com/photo-1462331940025-496dfbfc7564?auto=format&fit=crop&w=400&q=80' },
-    { name: 'Jupiter', desc: 'The largest planet.', img: 'https://images.unsplash.com/photo-1465101178521-c1a9136a3b99?auto=format&fit=crop&w=400&q=80' },
-];
+const Welcome: React.FC = () => {
+  //  获取用户信息
+  // const { data: userInfo, loading } = useRequest(async () => {
+  //   return { data: await getUserInfo() };
+  // });
 
-const navItems = ['首页', '资源', '关于', '联系'];
+  const { data: userInfo, loading } = useRequest(async () => {
+    const userRes = await getUserInfo();
+    // 假设 userId 为字符串类型，需要将其转换为数字类型，同时处理可能的 undefined 情况
+    const userId = userRes.user.userId ? parseInt(userRes.user.userId, 10) : 1;
+    const UserplanetRes = await getUserPlanet({ userId });
+    const planetId = UserplanetRes.planetId || 1;
+    const planetRes = await getPlanetInfo({ planetId });
 
-const Home: React.FC = () => {
-    const [search, setSearch] = useState('');
+    return {
+      data: {
+        ...userRes.user,
+        planet: planetRes
+      }
+    };
+  });
 
-    const filteredPlanets = planets.filter(p =>
-        p.name.toLowerCase().includes(search.toLowerCase())
-    );
+  if (loading) {
+    return <div>loading...</div>;
+  }
 
-    return (
-        <div style={{ fontFamily: 'sans-serif', background: 'linear-gradient(to bottom, #0f2027, #2c5364)', minHeight: '100vh', color: '#fff' }}>
-            {/* 导航栏 */}
-            <nav style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '24px 48px', background: 'rgba(0,0,0,0.4)' }}>
-                <div style={{ fontWeight: 'bold', fontSize: 28, letterSpacing: 2 }}>🌌 PT星球</div>
-                <div>
-                    {navItems.map(item => (
-                        <a
-                            key={item}
-                            href="#"
-                            style={{
-                                color: '#fff',
-                                margin: '0 18px',
-                                textDecoration: 'none',
-                                fontSize: 18,
-                                transition: 'color 0.2s',
-                            }}
-                        >
-                            {item}
-                        </a>
-                    ))}
-                </div>
-            </nav>
+  const currentUser = userInfo;
 
-            {/* 搜索框 */}
-            <div style={{ display: 'flex', justifyContent: 'center', margin: '48px 0 32px 0' }}>
-                <input
-                    type="text"
-                    placeholder="搜索星球资源..."
-                    value={search}
-                    onChange={e => setSearch(e.target.value)}
-                    style={{
-                        width: 360,
-                        padding: '12px 20px',
-                        borderRadius: 24,
-                        border: 'none',
-                        fontSize: 18,
-                        outline: 'none',
-                        boxShadow: '0 2px 12px rgba(0,0,0,0.2)',
-                    }}
-                />
-            </div>
-
-            {/* 资源卡片 */}
-            <div style={{
-                display: 'flex',
-                flexWrap: 'wrap',
-                justifyContent: 'center',
-                gap: '32px',
-                padding: '0 48px 48px 48px'
-            }}>
-                {filteredPlanets.map(planet => (
-                    <div
-                        key={planet.name}
-                        style={{
-                            background: 'rgba(255,255,255,0.08)',
-                            borderRadius: 18,
-                            width: 260,
-                            boxShadow: '0 4px 24px rgba(0,0,0,0.18)',
-                            overflow: 'hidden',
-                            transition: 'transform 0.2s',
-                        }}
-                    >
-                        <img src={planet.img} alt={planet.name} style={{ width: '100%', height: 140, objectFit: 'cover' }} />
-                        <div style={{ padding: 20 }}>
-                            <div style={{ fontWeight: 'bold', fontSize: 22, marginBottom: 8 }}>{planet.name}</div>
-                            <div style={{ fontSize: 16, color: '#cfd8dc' }}>{planet.desc}</div>
-                        </div>
-                    </div>
-                ))}
-            </div>
+  console.log(currentUser)
+  return (
+    <div>
+      <div className="origin">
+        <div className="control">
+          <div className="galaxy">
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+          </div>
         </div>
-    );
+      </div>
+      <div className="main">
+        <div>
+
+          {/* 第一排：悬浮搜索框 */}
+          <div className={styles.searchBarContainer}>
+            <input type="text" placeholder="Search for everything..." className={styles.searchInput} />
+          </div>
+          <div style={{ display: "flex", marginTop: '40px' }}>
+            <div className={styles.leftBox}>
+              <div className={styles.textContent}>
+                <Typography
+                  variant="h4"
+                  sx={{
+                    color: "#fff",
+                    fontWeight: 600,
+                    mb: 2,
+                    letterSpacing: 2,
+                    textShadow: "0 2px 16px #0ea5e9",
+                  }}
+                >
+                  Welcome Back!
+                </Typography>
+
+                <h2 className={styles.titlebox}>{currentUser?.nickName}，整点什么？</h2>
+                <Button style={{ width: "100px" }} size='small' type="primary" onClick={() => window.location.href = '/relation'}>我的形象</Button>
+              </div>
+              <div className={styles.gitAnimation}>
+                <img
+                  src={`/images/planets/${userInfo?.planet?.filename}.gif`}
+                  alt="用户形象"
+                  style={{
+                    width: 150,
+                    height: 150,
+                    borderRadius: '50%',
+                    border: '2px solid #4a4a7a',
+                    boxShadow: '0 0 15px #6a5acd'
+                  }}
+                />
+              </div>
+            </div>
+
+            {/* 新增右侧统计卡片（使用Ant Design组件） */}
+            <Card className={styles.rightCard} title="种子统计" bordered={false}>
+              <Row gutter={16}>
+                <Col span={8}>
+                  <Statistic title="总种子数" value={128} />
+                </Col>
+                <Col span={8}>
+                  <Statistic title="活跃种子" value={42} />
+                </Col>
+                <Col span={8}>
+                  <Statistic title="完成种子" value={86} />
+                </Col>
+              </Row>
+              <Divider />
+            </Card>
+            <Card className={styles.rightCard2} >
+
+              <Flex className={styles.buttonGroup}>
+                <div style={{
+                  fontSize: '16px',
+                  color: '#a8b2d1',
+                  letterSpacing: '1px'
+                }}>来看看星球的
+                </div>
+                <div style={{
+                  fontSize: '23px',
+                  color: '#0abde3',
+                  letterSpacing: '1px',
+                  fontWeight: 'bold',
+                }}>
+                  种子
+                </div>
+                <Button type="primary" onClick={() => window.location.href = '/torrent-upload'}>新建种子</Button>
+                <Button onClick={() => window.location.href = '/torrent-list'}>我的种子</Button>
+              </Flex>
+            </Card>
+
+            <Card className={styles.rightCard2} >
+
+              <Flex className={styles.buttonGroup}>
+                <div style={{
+                  fontSize: '16px',
+                  color: '#a8b2d1',
+                  letterSpacing: '1px'
+                }}>现在看看星球
+                </div>
+                <div style={{
+                  fontSize: '23px',
+                  color: '#e1b12c',
+                  letterSpacing: '1px',
+                  fontWeight: 'bold',
+                }}>
+                  动态
+                </div>
+                <Button color="orange" variant="solid" onClick={() => window.location.href = '/user-center'}>立即创作</Button>
+                <Button onClick={() => window.location.href = '/user-center'}>我的创作</Button>
+              </Flex>
+            </Card>
+
+          </div>
+
+          <div className={styles.homeContainer}>
+
+            {/* 第二排：左侧欢迎信息和右侧通知公告 */}
+            <div className={styles.secondRow}>
+              {/* 左侧框 */}
+              {/* 中间框：最新热点 */}
+              <div className={styles.middleBox}>
+                <div className={styles.hotSpot}>
+                  <h3 className={styles.hotTitle}>排行榜动态</h3>
+                  <ul className={styles.hotList}>
+                    {Array.from({ length: 5 }, (_, i) => (
+                      <li key={i} className={styles.hotItem}>
+                        <span className={styles.hotItemNumber}>{`${i + 1}`}</span>
+                        <span className={styles.hotItemText}>综合榜{`${i + 1}`}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+
+              {/* 右侧框：通知公告（轮播样式） */}
+              <div className={styles.rightBox}>
+                <div className={styles.carouselContainer}>
+                  {/* 轮播内容，这里用几个div模拟 */}
+                  <div className={styles.carouselItem}>通知公告 1</div>
+                  <div className={styles.carouselItem}>通知公告 2</div>
+                  <div className={styles.carouselItem}>通知公告 3</div>
+                </div>
+              </div>
+            </div>
+            {/* 第三排：帖子卡片 */}
+            <div className={styles.thirdRow}>
+              {Array.from({ length: 16 }, (_, i) => (
+                <div className={styles.postCard} key={i}>
+                  <div className={styles.cardContent}>
+                    <h3 className={styles.postTitle}>模拟帖子标题{`${i + 1}`}（这是一个可能会很长的标题测试单行缩略效果）</h3>
+                    <img src="/images/post-cover.jpg" alt="帖子封面" className={styles.cardImage} />
+                    <div className={styles.infoWrapper}>
+                      <p className={styles.postAuthor}>作者：用户{`${i + 1}`}</p>
+                      <div className={styles.tagsContainer}>
+                        {['技术', '生活', '分享'].map((tag, idx) => (
+                          <span className={styles.tag} key={idx}>{tag}</span>
+                        ))}
+                      </div>
+                      <div className={styles.statsContainer}>
+                        <span className={styles.statItem}><LikeOutlined /> {Math.floor(Math.random() * 1000)}</span>
+                        <span className={styles.statItem}><HeartOutlined /> {Math.floor(Math.random() * 500)}</span>
+                        <span className={styles.statItem}><EyeOutlined /> {Math.floor(Math.random() * 5000)}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 };
 
-export default Home;
\ No newline at end of file
+export default Welcome;

src/pages/PostCenter/index.module.css

diff --git a/src/pages/PostCenter/index.module.css b/src/pages/PostCenter/index.module.css
index 2b262e2..1c66ea5 100644
--- a/src/pages/PostCenter/index.module.css
+++ b/src/pages/PostCenter/index.module.css
@@ -29,10 +29,16 @@
   padding: 8px 16px;
   border-radius: 6px;
   transition: all 0.3s ease;
+  color: #000000;
+  font-weight: bold;
+
 }
 
 .categoryButton:hover {
-  background-color: #f0f0f0;
+  background: #888888;
+  color: #666;
+  font-weight: bold;
+  border: 1px solid #888888;
 }
 
 .searchContainer {

src/pages/Relation/index.tsx

diff --git a/src/pages/Relation/index.tsx b/src/pages/Relation/index.tsx
new file mode 100644
index 0000000..a5d2d97
--- /dev/null
+++ b/src/pages/Relation/index.tsx
@@ -0,0 +1,258 @@
+import { useEffect, useState } from 'react';
+import { Card, List, Button, message, Carousel, Modal } from 'antd';
+import { getUserInfo } from '@/services/session';
+import { getPlanetList, updateUserPlanet, getUserPlanet, getPlanetInfo, PlanetEntity, getRandomUserPlanets } from '@/services/planets/api';
+import { useRequest } from '@umijs/max';
+import { getUser } from '@/services/system/user';
+
+const RelationPage = () => {
+    const [planetList, setPlanetList] = useState<PlanetEntity[]>([]);
+    const [relatedUsers, setRelatedUsers] = useState<any[]>([]);
+    const [selectedUser, setSelectedUser] = useState<any>(null);
+    const [userModalVisible, setUserModalVisible] = useState(false);
+    //  获取用户信息
+    const { data: userInfo, loading: userLoading } = useRequest(async () => {
+        const userRes = await getUserInfo();
+        // 假设 userId 为字符串类型，需要将其转换为数字类型，同时处理可能的 undefined 情况
+        const userId = userRes.user.userId ? parseInt(userRes.user.userId, 10) : 1;
+        const UserplanetRes = await getUserPlanet({ userId });
+        console.log(UserplanetRes);
+        const planetId = UserplanetRes.planetId || 1;
+        const planetRes = await getPlanetInfo({ planetId });
+
+        return {
+            data: {
+                ...userRes.user,
+                planet: planetRes
+            }
+        };
+    });
+
+
+
+
+    console.log(userInfo);
+    const [listLoading, setListLoading] = useState(false);
+    // 获取所有GIF列表
+    const fetchPlanetList = async () => {
+        try {
+            setListLoading(true);
+            const res = await getPlanetList({ pageNum: 1, pageSize: 100 });
+            console.log(res);
+            setPlanetList(res);
+        } catch (error) {
+            message.error('获取GIF列表失败');
+        } finally {
+            setListLoading(false);
+        }
+    };
+
+    // 获取相关用户信息
+    const fetchRelatedUsers = async () => {
+        try {
+            // 获取随机用户星球列表
+            const randomPlanetsNo = await getRandomUserPlanets();
+            const userId = userInfo?.userId ? parseInt(userInfo.userId, 10) : 1;
+            const randomPlanets = randomPlanetsNo.filter((item) => item.userId !== userId);
+            // 获取完整用户信息并关联星球数据
+            const usersWithPlanets = await Promise.all(
+                randomPlanets.map(async (item) => {
+
+                    // 确保 item.userId 为 number 类型，若为 undefined 则使用默认值 1
+                    const userIdToUse = typeof item.userId === 'number' ? item.userId : 1;
+                    const userRes = await getUser(userIdToUse);
+                    const planetRes = await getPlanetInfo({ planetId: item.planetId });
+                    return {
+                        user: userRes.data,
+                        planet: planetRes
+                    };
+                })
+            );
+
+            setRelatedUsers(usersWithPlanets);
+            console.log(usersWithPlanets);
+        } catch (error) {
+            message.error('获取相关用户失败');
+            console.error(error);
+        }
+    };
+
+    useEffect(() => {
+        fetchPlanetList();
+        fetchRelatedUsers();
+    }, []);
+    // 显示用户详情
+    const showUserDetails = (user: any) => {
+        setSelectedUser(user);
+        setUserModalVisible(true);
+    };
+    console.log(planetList);
+    // 更新用户形象
+    const handleUpdateAvatar = async (id: number | undefined) => {
+        if (!id) {
+            message.error('无效的星球ID');
+            return;
+        }
+        try {
+            console.log(id);
+            // 处理 userInfo.userId 可能为 undefined 的情况，若为 undefined 则使用默认值 '1'
+            const userIdStr = userInfo?.userId || '1';
+            console.log(userIdStr);
+            await updateUserPlanet({ planetId: id, userId: parseInt(userIdStr, 10) });
+            message.success('更新形象成功');
+            window.location.reload();
+        } catch (error) {
+            message.error('更新形象失败');
+        }
+    };
+    if (userLoading) {
+        return <div>Loading...</div>;
+    }
+
+    return (
+        <div>
+            <Card title="当前形象" style={{ background: 'transparent', borderColor: '#3a3a5c' }}>
+                {userInfo?.planet && (
+                    <div style={{ textAlign: 'center' }}>
+                        <img
+                            src={`/images/planets/${userInfo.planet.filename}.gif`}
+                            alt="用户形象"
+                            style={{
+                                width: 200,
+                                height: 200,
+                                borderRadius: '50%',
+                                border: '2px solid #4a4a7a',
+                                boxShadow: '0 0 15px #6a5acd'
+                            }}
+                        />
+                        <div style={{
+                            marginTop: 16,
+                            color: '#a8b2d1',
+                            fontSize: 16
+                        }}>
+                            当前形象: {userInfo.planet.name}
+                        </div>
+                    </div>
+                )}
+            </Card>
+
+            <Card title="选择新形象" style={{
+                marginTop: 24,
+                background: 'transparent',
+                borderColor: '#3a3a5c'
+            }}>
+                <Carousel
+                    dots={false}
+                    arrows={true}
+                    style={{ width: '100%', maxWidth: 800, margin: '0 auto' }}
+                >
+                    {planetList.map((item) => (
+                        <div key={item.planetId} style={{ textAlign: 'center', padding: '0 40px' }}>
+                            <div style={{ marginBottom: 16 }}>
+                                <img
+                                    src={`/images/planets/${item.filename}.gif`}
+                                    alt={item.name}
+                                    style={{
+                                        width: 200,
+                                        height: 200,
+                                        borderRadius: '50%',
+                                        border: '2px solid #4a4a7a',
+                                        boxShadow: '0 0 15px #6a5acd',
+                                        marginTop: 16,
+                                        margin: '0 auto'
+                                    }}
+                                />
+                            </div>
+                            <div style={{
+                                color: '#a8b2d1',
+                                marginBottom: 16
+                            }}>
+                                <div style={{ fontSize: 18, fontWeight: 'bold' }}>{item.name}</div>
+                                <div style={{ margin: '8px 0' }}>{item.description}</div>
+                                <div>创建时间: {item.createTime}</div>
+                            </div>
+                            <Button
+                                type="primary"
+                                onClick={() => handleUpdateAvatar(item.planetId)}
+                                style={{
+                                    background: 'linear-gradient(45deg, #6a5acd, #9370db)',
+                                    border: 'none'
+                                }}
+                            >
+                                选择
+                            </Button>
+                        </div>
+                    ))}
+                </Carousel>
+            </Card>
+
+            <Card title="与你相关的人" style={{
+                marginTop: 24,
+                background: 'transparent',
+                borderColor: '#3a3a5c'
+            }}>
+                <Carousel
+                    dots={false}
+                    arrows={true}
+                    style={{ width: '100%', maxWidth: 800, margin: '0 auto' }}
+                >
+                    {relatedUsers.map((item) => (
+                        <div key={item.userId} style={{ textAlign: 'center', padding: '0 40px' }}>
+                            <div style={{ marginBottom: 16 }}>
+                                <img
+                                    src={`/images/planets/${item.planet.filename}.gif`}
+                                    alt={item.planet.name}
+                                    style={{
+                                        width: 200,
+                                        height: 200,
+                                        borderRadius: '50%',
+                                        border: '2px solid #4a4a7a',
+                                        boxShadow: '0 0 15px #6a5acd',
+                                        margin: '0 auto'
+                                    }}
+                                />
+                            </div>
+                            <div style={{
+                                color: '#a8b2d1',
+                                marginBottom: 16
+                            }}>
+                                <div style={{ fontSize: 18, fontWeight: 'bold' }}>昵称：{item.user.nickName}</div>
+                                <div style={{ margin: '8px 0' }}>邮箱：{item.user.email}</div>
+                                <div>星球形象：{item.planet.name}</div>
+                            </div>
+                            <Button
+                                type="primary"
+                                onClick={() => showUserDetails(item.user)}
+                                style={{
+                                    background: 'linear-gradient(45deg, #6a5acd, #9370db)',
+                                    border: 'none'
+                                }}
+                            >
+                                查看详情
+                            </Button>
+                        </div>
+                    ))}
+                </Carousel>
+            </Card>
+
+            <Modal
+                title="用户详情"
+                visible={userModalVisible}
+                onCancel={() => setUserModalVisible(false)}
+                footer={null}
+                style={{ color: '#a8b2d1' }}
+            >
+                {selectedUser && (
+                    <div>
+                        <p>昵称: {selectedUser.nickName}</p>
+                        <p>邮箱: {selectedUser.email}</p>
+                        <p>电话: {selectedUser.phonenumber}</p>
+
+                    </div>
+                )}
+            </Modal>
+        </div>
+    );
+};
+
+export default RelationPage;
\ No newline at end of file

src/pages/System/User/index.tsx

diff --git a/src/pages/System/User/index.tsx b/src/pages/System/User/index.tsx
index 6435787..5042208 100644
--- a/src/pages/System/User/index.tsx
+++ b/src/pages/System/User/index.tsx
@@ -1,4 +1,3 @@
-
 import React, { useState, useRef, useEffect } from 'react';
 import { useIntl, FormattedMessage, useAccess } from '@umijs/max';
 import { Card, Col, Dropdown, FormInstance, Row, Space, Switch } from 'antd';
@@ -257,7 +256,7 @@
           icon=<EditOutlined />
           hidden={!access.hasPerms('system:user:edit')}
           onClick={async () => {
-            fetchUserInfo(record.userId);
+            await fetchUserInfo(record.userId);
             const treeData = await getDeptTree({});
             setDeptTree(treeData);
             setModalVisible(true);
@@ -283,7 +282,7 @@
                 const success = await handleRemoveOne(record);
                 if (success) {
                   if (actionRef.current) {
-                    actionRef.current.reload();
+                    actionRef.current?.reload();
                   }
                 }
               },
@@ -499,7 +498,7 @@
             setModalVisible(false);
             setCurrentRow(undefined);
             if (actionRef.current) {
-              actionRef.current.reload();
+              actionRef.current?.reload();
             }
           }
         }}

src/pages/User/Center/index.tsx

diff --git a/src/pages/User/Center/index.tsx b/src/pages/User/Center/index.tsx
index 2ce308c..8622219 100644
--- a/src/pages/User/Center/index.tsx
+++ b/src/pages/User/Center/index.tsx
@@ -38,11 +38,11 @@
 export type tabKeyType = 'base' | 'password';
 
 const Center: React.FC = () => {
-  
+
   const [tabKey, setTabKey] = useState<tabKeyType>('base');
-  
+
   const [cropperModalOpen, setCropperModalOpen] = useState<boolean>(false);
-  
+
   //  获取用户信息
   const { data: userInfo, loading } = useRequest(async () => {
     return { data: await getUserInfo()};
@@ -188,7 +188,7 @@
       </Row>
       <AvatarCropper
         onFinished={() => {
-          setCropperModalOpen(false);     
+          setCropperModalOpen(false);
         }}
         open={cropperModalOpen}
         data={currentUser.avatar}

src/pages/User/Login/index.tsx

diff --git a/src/pages/User/Login/index.tsx b/src/pages/User/Login/index.tsx
index 585f97b..e29032e 100644
--- a/src/pages/User/Login/index.tsx
+++ b/src/pages/User/Login/index.tsx
@@ -85,7 +85,7 @@
 };
 
 const Login: React.FC = () => {
-  const [userLoginState, setUserLoginState] = useState<API.LoginResult>({code: 200});
+  const [userLoginState, setUserLoginState] = useState<API.LoginResult>({ code: 200 });
   const [type, setType] = useState<string>('account');
   const { initialState, setInitialState } = useModel('@@initialState');
   const [captchaCode, setCaptchaCode] = useState<string>('');
@@ -255,7 +255,7 @@
           }
           subTitle={
             <span style={{ color: '#b3c7f9', fontSize: 16 }}>
-              探索你的专属星球，畅享PT世界
+              探索你的专属星球，畅享PT世界  JRX MSY ZYT HXQ LJB
             </span>
           }
           initialValues={{
@@ -509,7 +509,7 @@
                   color: '#fff',
                   fontSize: 14,
                 }}>
-              <FormattedMessage id="pages.login.rememberMe"  defaultMessage="自动登录" />
+                <FormattedMessage id="pages.login.rememberMe" defaultMessage="自动登录" />
               </a>
             </ProFormCheckbox>
             <a

src/services/planets/api.ts

diff --git a/src/services/planets/api.ts b/src/services/planets/api.ts
new file mode 100644
index 0000000..4c443d3
--- /dev/null
+++ b/src/services/planets/api.ts
@@ -0,0 +1,79 @@
+import { request } from '@umijs/max';
+
+export interface PlanetEntity {
+    planetId?: number;
+    name?: string;
+    filename?: string;
+    description?: string;
+    createTime?: string;
+}
+
+export interface UserPlanetEntity {
+    userId?: number;
+    planetId?: number;
+    updateTime?: string;
+}
+
+export async function getPlanetList(params: {
+    pageNum?: number;
+    pageSize?: number;
+}) {
+    const res = await request<{ code: number; data: PlanetEntity[] }>('/api/planets/list', {
+        method: 'GET',
+        params,
+    });
+    return res.data;
+
+}
+
+export async function getPlanetInfo(params: { planetId: number | undefined; }): Promise<PlanetEntity> {
+    const res = await request<{ code: number; data: PlanetEntity }>(`/api/planets/info/${params.planetId}`, {
+        method: 'GET',
+    });
+    return res.data;
+}
+
+export async function uploadPlanetFile(file: File) {
+    const formData = new FormData();
+    formData.append('file', file);
+    return request('/api/planets/upload', {
+        method: 'POST',
+        data: formData,
+        requestType: 'form',
+    });
+}
+
+export async function getUserPlanet(params: { userId: number }) {
+    const res = await request<{ code: number; data: UserPlanetEntity }>('/api/planets/user', {
+        method: 'GET',
+        params,
+    });
+    return res.data;
+}
+
+export async function updatePlanet(entity: PlanetEntity) {
+    return request('/api/planets/update', {
+        method: 'POST',
+        data: entity,
+    });
+}
+export async function updateUserPlanet(entity: UserPlanetEntity) {
+    return request('/api/planets/updateUserPlanet', {
+        method: 'POST',
+        data: entity,
+    });
+}
+
+export async function deletePlanet(ids: number[]) {
+    return request('/api/planets/delete', {
+        method: 'POST',
+        data: ids,
+    });
+}
+
+export async function getRandomUserPlanets() {
+    const res = await request<{ code: number; data: UserPlanetEntity[] }>('/api/planets/random', {
+        method: 'GET',
+    })
+    return res.data;
+}
\ No newline at end of file

src/services/typings.d.ts

diff --git a/src/services/typings.d.ts b/src/services/typings.d.ts
index 468320e..0dd8b19 100644
--- a/src/services/typings.d.ts
+++ b/src/services/typings.d.ts
@@ -3,6 +3,9 @@
 
 declare namespace API {
 
+  import Dept = API.System.Dept;
+  import Role = API.System.Role;
+
   interface PageInfo {
     current?: number;
     pageSize?: number;