From 26684e836aadffe419574a1590387336e805ab07 Mon Sep 17 00:00:00 2001
From: "shengbin.ma" <mashengbin@chinabr.net>
Date: Sun, 29 Sep 2024 23:48:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A2=AB=E9=82=80=E8=AF=B7=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/invite/page.tsx                 | 44 +++++++++++++++++++++++++
 src/components/DownloadButton/index.tsx | 21 ++++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 src/app/invite/page.tsx
 create mode 100644 src/components/DownloadButton/index.tsx

diff --git a/src/app/invite/page.tsx b/src/app/invite/page.tsx
new file mode 100644
index 0000000..bae5459
--- /dev/null
+++ b/src/app/invite/page.tsx
@@ -0,0 +1,44 @@
+'use client';
+import { useEffect } from 'react';
+
+import DownloadButton from '@/components/DownloadButton';
+
+export default function Invite() {
+  useEffect(() => {
+    document.title = '加入雀乐';
+  }, []);
+
+  return (
+    <main className="max-w-screen-sm min-h-screen mx-auto flex flex-col justify-between items-center font-normal text-#000/95 bg-#f3f2f7 px-18px pb-50px">
+      <div className="flex flex-col justify-between mx-auto">
+        <div className="mt-34px"></div>
+
+        <div className="mt-13px flex flex-col justify-between items-center">
+          <p className="text-17px leading-23.8px">{`${1}，邀请你加入雀乐`}</p>
+          <p className="w-fit mt-1px text-12px leading-16.8px text-#000/40">一起 记录独立音乐</p>
+        </div>
+
+        <div className="flex justify-between items-center w-278px h-103px mt-14px pl-30px pr-25px bg-#fff">
+          <img className="w-42px h-42px rounded-full" src="/img/share.png" alt="" />
+          <div>
+            <div>
+              <div className="flex items-center text-17px leading-23.8px">
+                <div>推荐码</div>
+                <div className="w-1px h-14.5px mx-9px bg-#000/10" />
+                <div>xxxxxxx</div>
+              </div>
+              <p className="text-12px leading-16.8px text-#000/40">填写邀请码，双方均可获得积分</p>
+            </div>
+          </div>
+        </div>
+
+        <DownloadButton className="w-300px mt-33px" />
+      </div>
+
+      <div className="flex flex-col items-center text-12px leading-16.8px">
+        <p className="font-400">填写推荐码流程</p>
+        <p className="mt-4px font-500 text-#000/70">点击【我的】-编辑资料-填写推荐码</p>
+      </div>
+    </main>
+  );
+}
diff --git a/src/components/DownloadButton/index.tsx b/src/components/DownloadButton/index.tsx
new file mode 100644
index 0000000..0a56be2
--- /dev/null
+++ b/src/components/DownloadButton/index.tsx
@@ -0,0 +1,21 @@
+/**
+ * 下载 App 页面
+ */
+'use client';
+
+import { download } from '@/utils/download';
+
+export default function DownloadButton({ className = '' }: { className?: string }) {
+  const handleDownload = () => {
+    download();
+  };
+
+  return (
+    <button
+      className={`w-full h-45px bg-[#C43737] text-#fff/95 text-15px leading-21px rounded-full ${className}`}
+      onClick={handleDownload}
+    >
+      下载【雀乐】APP
+    </button>
+  );
+}