update(styles): Update download page and about page styles

public/.well-known/apple-app-site-association

@@ -0,0 +1,13 @@
+{
+  "applinks": {
+    "apps": [],
+    "details": [
+      {
+        "appID": "AY569L2R6W.cn.luoo.IndieMusic",
+        "paths": [
+          "*"
+        ]
+      }
+    ]
+  }
+}

src/app/about/about.module.css

@@ -21,7 +21,7 @@
   content: '';
   display: block;
   left: 83px;
-  bottom: 2px;
+  bottom: -2px;
   position: absolute;
   width: 24px;
   height: 24px;

src/app/about/page.tsx

@@ -23,7 +23,7 @@ export default async function Download() {
       <main className="w-[1200px] mx-auto  flex flex-col items-left pt-[80px] pb-[104px] ">
         {/* about */}
         <div className="w-full pt-[110px]">
-          <h2 className="text-[36px] leading-[50px] font-bold">关于雀乐</h2>
+          <h2 className="text-[32px] leading-[50px] font-bold">关于雀乐</h2>
           <p className="mt-[6px] mb-[41px] text-[rgba(0,0,0,0.4)] text-[15px] leading-[24px]">原「落网APP」</p>
           <div className="text-[15px] leading-[24px]">
             <p className="font-bold">
@@ -38,7 +38,7 @@ export default async function Download() {
 
         {/* contributor */}
         <div className="relative w-full mt-[120px]">
-          <h2 className="text-[36px] leading-[50px] font-bold">贡献者</h2>
+          <h2 className="text-[32px] leading-[50px] font-bold">贡献者</h2>
 
           <div className={styles.halo} />
 
@@ -84,16 +84,20 @@ export default async function Download() {
 
         {/* 联系我们 */}
         <div className="w-full pt-[110px]">
-          <h2 className="text-[36px] leading-[50px] font-bold">联系我们</h2>
+          <h2 className="text-[32px] leading-[50px] font-bold">联系我们</h2>
 
           <div className="mt-[46px]">
             <p className="mb-[6px] text-[15px] leading-[21px] text-[rgba(0,0,0,0.7)]">商务合作</p>
-            <p className="text-[20px] leading-[28px] text-[#000]">rock@indie.cn</p>
+            <a className="text-[20px] leading-[28px] text-[#000]" href="mailto:rock@indie.cn" target="_blank">
+              rock@indie.cn
+            </a>
           </div>
 
           <div className="mt-[36px]">
             <p className="mb-[6px] text-[15px] leading-[21px] text-[rgba(0,0,0,0.7)]">Weibo</p>
-            <p className={styles.weibo}>官方微博</p>
+            <a className={styles.weibo} href="https://weibo.com/u/1886232237" target="_blank">
+              官方微博
+            </a>
           </div>
 
           <div className="flex flex-col items-center w-[130px] mt-[38px] mb-[102px]">

src/app/download/components/index.module.css

@@ -29,5 +29,5 @@
   width: 200px;
   height: 72px;
   border-radius: 9px;
-  background-color: rgba(255, 255, 255, 0.1); /* 白色蒙层，透明度为10% */
+  background-color: rgba(255, 255, 255, 0.05); /* 白色透明蒙层 */
 }

src/app/download/page.tsx

@@ -2,7 +2,7 @@
 
 import Image from 'next/image';
 
-import DownloadCard from './components/DownloadCard';
+import DownloadCard from '@/app/download/components/DownloadCard';
 
 const qrCodeList: Array<DownloadQrcodeCard> = [
   {
@@ -21,11 +21,17 @@ export default function Download() {
   return (
     <main className="w-full flex flex-col items-center pb-[104px] font-normal">
       {/* 首屏 */}
-      <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]">
+      <div className="relative w-full h-min-[1000px] h-screen flex flex-col items-center pt-[30vh] bg-[url(/img/download/background_1.jpg)] bg-center bg-cover bg-no-repeat text-[#fff]">
         {/* slogan */}
-        <div className="flex flex-col items-center mb-[35px]">
+        <div className="flex flex-col items-center mb-[40px]">
           <Image width={410} height={50} src="/img/download/slogan_line1.svg" alt="为独立音乐，雀跃" />
-          <Image className="mt-[26px] mb-[26px]" width={9} height={24} src="/img/download/slogan_line2.svg" alt="/" />
+          <Image
+            className="w-[6px] h-[20px] mt-[30px] mb-[30px] overflow-hidden"
+            width={6}
+            height={20}
+            src="/img/download/slogan_line2.svg"
+            alt="/"
+          />{' '}
           <Image width={143} height={24} src="/img/download/slogan_line3.svg" alt="独立 不独于世" />
         </div>
 
@@ -38,12 +44,18 @@ export default function Download() {
       </div>
 
       {/* 第二屏 */}
-      <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">
+      <div className="relative w-full h-[1000px] h-screen  pl-[45.7vw] flex flex-col bg-[url(/img/download/background_2.jpg)] bg-center bg-cover bg-no-repeat">
         {/* 花体字-“我们回来了” */}
-        <Image className="mt-[16.67vh] mb-[50px]" width={306} height={86} src="/img/download/back.svg" alt="back" />
+        <Image
+          className="w-[226px] h-[46px] mt-[16.67vh] mb-[50px]"
+          width={306}
+          height={46}
+          src="/img/download/back.svg"
+          alt="back"
+        />
 
         {/* 诗歌 */}
-        <p className="pl-[15px] text-[#000] text-[15px] leading-[28px] text-left">
+        <p className="text-[#000] text-[15px] leading-[28px] text-left">
           音乐是一种态度
           <br />
           不论是创作者还是聆听者

src/app/page.tsx

@@ -21,11 +21,17 @@ export default function Download() {
   return (
     <main className="w-full flex flex-col items-center pb-[104px] font-normal">
       {/* 首屏 */}
-      <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]">
+      <div className="relative w-full h-min-[1000px] h-screen flex flex-col items-center pt-[30vh] bg-[url(/img/download/background_1.jpg)] bg-center bg-cover bg-no-repeat text-[#fff]">
         {/* slogan */}
-        <div className="flex flex-col items-center mb-[35px]">
+        <div className="flex flex-col items-center mb-[40px]">
           <Image width={410} height={50} src="/img/download/slogan_line1.svg" alt="为独立音乐，雀跃" />
-          <Image className="mt-[26px] mb-[26px]" width={9} height={24} src="/img/download/slogan_line2.svg" alt="/" />
+          <Image
+            className="w-[6px] h-[20px] mt-[30px] mb-[30px] overflow-hidden"
+            width={6}
+            height={20}
+            src="/img/download/slogan_line2.svg"
+            alt="/"
+          />{' '}
           <Image width={143} height={24} src="/img/download/slogan_line3.svg" alt="独立 不独于世" />
         </div>
 
@@ -38,12 +44,18 @@ export default function Download() {
       </div>
 
       {/* 第二屏 */}
-      <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">
+      <div className="relative w-full h-[1000px] h-screen  pl-[45.7vw] flex flex-col bg-[url(/img/download/background_2.jpg)] bg-center bg-cover bg-no-repeat">
         {/* 花体字-“我们回来了” */}
-        <Image className="mt-[16.67vh] mb-[50px]" width={306} height={86} src="/img/download/back.svg" alt="back" />
+        <Image
+          className="w-[226px] h-[46px] mt-[16.67vh] mb-[50px]"
+          width={306}
+          height={46}
+          src="/img/download/back.svg"
+          alt="back"
+        />
 
         {/* 诗歌 */}
-        <p className="pl-[15px] text-[#000] text-[15px] leading-[28px] text-left">
+        <p className="text-[#000] text-[15px] leading-[28px] text-left">
           音乐是一种态度
           <br />
           不论是创作者还是聆听者

src/components/Footer.tsx

@@ -27,7 +27,7 @@ export default function Footer() {
 
         <p className="text-[rgba(0,0,0,0.7)]">
           {agreementList.map(({ name, url }) => (
-            <a className="mx-[4px] hover:text-theme" href={url} key={name} target="_blank">
+            <a className="mx-[4px] hover:text-[#000]" href={url} key={name} target="_blank">
               {name}
             </a>
           ))}

src/components/Header.tsx

@@ -37,11 +37,11 @@ export default function Header() {
         <Logo />
 
         <div className="h-full flex flex-row items-center">
-          <ul className="mr-[40px] flex flex-row items-center space-x-[40px]">
+          <ul className="flex flex-row items-center space-x-[40px]">
             {menuList.map(({ name, path }) => (
               <li
                 key={path}
-                className={`text-[18px] leading-[25.2px] hover:text-[rgba(0,0,0,0.95)] ${pathName === path ? 'text-[rgba(0,0,0,0.95)]' : 'text-[rgba(0,0,0,0.4)]'}`}
+                className={`text-[18px] leading-[25.2px] font-medium hover:text-[rgba(0,0,0,0.95)] ${pathName === path ? 'text-[rgba(0,0,0,0.95)]' : 'text-[rgba(0,0,0,0.4)]'}`}
               >
                 <Link href={path}>{name}</Link>
               </li>
@@ -49,7 +49,7 @@ export default function Header() {
           </ul>
 
           {/* <button
-            className="w-[74px] h-[36px] border-[#000] border-[1.5px] rounded-[60px] text-[17px] hover:bg-theme hover:border-theme hover:text-[#fff] "
+            className="w-[74px] h-[36px] ml-[40px]  border-[#000] border-[1.5px] rounded-[60px] text-[17px] hover:bg-theme hover:border-theme hover:text-[#fff] "
             onClick={handleLoginModalToggle}
           >
             登录