feat: add new component(download-card)

src/app/download/components/download-card.tsx

@@ -0,0 +1,23 @@
+import Image from 'next/image';
+
+export default function Footer({ platform, iconUrl, qrCode }: DownloadQrcodeCard) {
+  console.log({ platform, iconUrl, qrCode });
+
+  return (
+    <div>
+      {/* 卡片 */}
+      <div className="flex flex-col w-[200px] h-[72px] bg-[#000] mx-[22px]">
+        <Image className="" width={48} height={48} src={iconUrl} alt={`${platform}-icon`} />
+        <div>
+          <p>下载应用</p>
+          <p>{platform}</p>
+        </div>
+      </div>
+
+      {/* 二维码 */}
+      <div>
+        {/* {qrCode && <Image className="" width={48} height={48} src={qrCode} alt={`${platform}-qrCode`} />} */}
+      </div>
+    </div>
+  );
+}

src/app/download/page.tsx

@@ -2,6 +2,21 @@
 
 import Image from 'next/image';
 
+import DownloadCard from './components/download-card';
+
+const qrCodeList: Array<DownloadQrcodeCard> = [
+  {
+    platform: 'APP Store',
+    iconUrl: '/img/download/logo_apple.svg',
+    qrCode: '',
+  },
+  {
+    platform: 'Android',
+    iconUrl: '/img/download/logo_android.svg',
+    qrCode: '/img/download/qrcode_android.svg',
+  },
+];
+
 export default function Download() {
   return (
     <main className="w-full flex flex-col items-center pb-[104px] font-normal">
@@ -11,12 +26,19 @@ export default function Download() {
         <h2 className="h-[70px] text-center text-[50px] font-bold leading-[70px]">为独立音乐，雀跃</h2>
         <h2 className="h-[44px] text-center text-[24px] font-thin leading-[28px] my-[10px 34px] mt-[10px]">/</h2>
         <h2 className="h-[44px] text-center text-[24px] leading-[28px]">独立 不独于世</h2>
+
+        {/* APP二维码 */}
+        <div className="flex flex-row">
+          {qrCodeList.map(({ platform, iconUrl, qrCode }) => (
+            <DownloadCard key={platform} platform={platform} iconUrl={iconUrl} qrCode={qrCode} />
+          ))}
+        </div>
       </div>
 
       {/* 第二屏 */}
       <div className="relative w-full h-[1000px] h-screen flex flex-col items-center pt-[166px] bg-[url(/img/download/background_2.png)] bg-center bg-cover bg-no-repeat">
         {/* 花体字-“我们回来了” */}
-        <Image className="mb-[50px]" width={306} height={86} src="/img/download/back.svg" alt="wx-share" />
+        <Image className="mb-[50px]" width={306} height={86} src="/img/download/back.svg" alt="back" />
 
         {/* 诗歌 */}
         <p className="text-center text-[#000] text-[15px] text-left leading-[28px]">

src/types/home.d.ts

@@ -0,0 +1,5 @@
+declare interface DownloadQrcodeCard {
+  platform: 'APP Store' | 'Android';
+  iconUrl: string;
+  qrCode: string;
+}

src/utils/download.ts

@@ -1,9 +0,0 @@
-import { Hosting } from '@/utils/ua';
-
-// 下载
-export const download = () => {
-  const ua = window?.navigator?.userAgent?.toLowerCase();
-  if (!Hosting.isWX(ua)) {
-    window.open('//cdn.indie.cn/release/queyue.apk', '__blank');
-  }
-};