update: download page style

public/img/download/slogan_line2.svg

@@ -0,0 +1,3 @@
+<svg width="7" height="21" viewBox="0 0 7 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.76644 0.808153L1.58244 20.8722H0.238438L5.47044 0.808153H6.76644Z" fill="white"/>
+</svg>

src/app/download/components/download-card.module.css

@@ -0,0 +1,22 @@
+/* w-[136px] h-[136px] rounded-[9px] bg-[#fff] :before:content-[''] :before:bg-[#fff] */
+.qrcodeContainer {
+  position: relative;
+  width: 130px;
+  height: 130px;
+  margin-top: 14px;
+  border-radius: 9px;
+  background-color: #fff;
+}
+
+.qrcodeContainer:before {
+  position: absolute;
+  top: -6px;
+  left: 62px;
+  content: '';
+  display: block;
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #fff;
+}

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

@@ -1,22 +1,34 @@
 import Image from 'next/image';
 
-export default function Footer({ platform, iconUrl, qrCode }: DownloadQrcodeCard) {
-  console.log({ platform, iconUrl, qrCode });
+import styles from './download-card.module.css';
 
+export default function Footer({ platform, iconUrl, qrCode }: DownloadQrcodeCard) {
   return (
-    <div>
+    <div className="flex flex-col items-center">
       {/* 卡片 */}
-      <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 className="flex flex-row w-[200px] h-[72px] p-[12px] rounded-[9px] bg-[#000] mx-[22px]">
+        <Image className="mr-[12px]" width={48} height={48} src={iconUrl} alt={`${platform}-icon`} />
         <div>
-          <p>下载应用</p>
-          <p>{platform}</p>
+          <p className="my-[2px] mr-[14px] text-[13px] leading-[18px] text-[rgba(255,255,255,0.7)] text-thin">
+            下载应用
+          </p>
+          <p className="text-[16px] font-bold	leading-[22px]">{platform}</p>
         </div>
       </div>
 
       {/* 二维码 */}
-      <div>
-        {/* {qrCode && <Image className="" width={48} height={48} src={qrCode} alt={`${platform}-qrCode`} />} */}
+      <div className={styles.qrcodeContainer}>
+        {qrCode ? (
+          <Image
+            className="w-[122px] h-[122px] m-[4px]"
+            width={48}
+            height={48}
+            src={qrCode}
+            alt={`${platform}-qrCode`}
+          />
+        ) : (
+          <p className="text-[12px] text-[rgba(0,0,0,0.6)] text-center leading-[130px]">努力开发中</p>
+        )}
       </div>
     </div>
   );

src/app/download/page.tsx

@@ -23,9 +23,11 @@ export default function Download() {
       {/* 首屏 */}
       <div className="relative w-full h-min-[1000px] h-screen flex flex-col items-center pt-[30vh] bg-[url(/img/download/background_1.png)] bg-center bg-cover bg-no-repeat text-[#fff]">
         {/* slogan */}
-        <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>
+        <div className="flex flex-col items-center mb-[35px]">
+          <Image width={410} height={50} src="/img/download/slogan_line1.svg" alt="为独立音乐，雀跃" />
+          <Image className="mt-[26px] mb-[18px]" width={9} height={24} src="/img/download/slogan_line2.svg" alt="/" />
+          <Image width={143} height={24} src="/img/download/slogan_line3.svg" alt="独立 不独于世" />
+        </div>
 
         {/* APP二维码 */}
         <div className="flex flex-row">
@@ -36,12 +38,12 @@ export default function Download() {
       </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">
+      <div className="relative w-full h-[1000px] h-screen  pl-[45.7vw] flex flex-col 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="back" />
+        <Image className="mt-[16.67vh] 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]">
+        <p className="pl-[15px] text-[#000] text-[15px] leading-[28px] text-left">
           音乐是一种态度
           <br />
           不论是创作者还是聆听者

src/components/Footer.tsx

@@ -1,14 +1,31 @@
 export default function Footer() {
+  const agreementList = [
+    {
+      name: '服务条款',
+      url: '/',
+    },
+    {
+      name: '版权声明',
+      url: '/',
+    },
+    {
+      name: '许可协议',
+      url: '/',
+    },
+  ];
+
   return (
-    <footer className="absolute bottom-0 flex flex-col items-center w-full justify-center  text-center text-[12px] leading-[12.6px]">
-      <p className="absolute bottom-[69px] text-[rgba(0,0,0,0.4)]">
+    <footer className="absolute bottom-[40px] flex flex-col items-center w-full justify-center  text-center text-[12px] leading-[16.8px]">
+      <p className="mt-[18px] mb-[12px] text-[rgba(0,0,0,0.4)]">
         粤ICP备2024190175号-1 深圳雀乐文化科技有限责任公司 Shenzhen QueYue Culture Technology Co., Ltd.
       </p>
 
-      <p className="absolute bottom-[40px] text-[rgba(0,0,0,0.7)]">
-        <a href="">服务条款</a>
-        <a href="">版权声明</a>
-        <a href="">许可协议</a>
+      <p className="text-[rgba(0,0,0,0.7)]">
+        {agreementList.map(({ name, url }) => (
+          <a className="mx-[4px]" href={url} key={name}>
+            {name}
+          </a>
+        ))}
       </p>
     </footer>
   );