update: download page

src/app/download/components/DownloadCard.tsx

@@ -1,23 +1,41 @@
+import { useState } from 'react';
+
 import Image from 'next/image';
 
-import styles from './download-card.module.css';
+import styles from './index.module.css';
 
 export default function Footer({ platform, iconUrl, qrCode }: DownloadQrcodeCard) {
+  const [showQrCode, setShowQrCode] = useState<boolean>(false);
+
+  const handleMouseEnter = () => {
+    setShowQrCode(true);
+  };
+
+  const handleMouseLeave = () => {
+    setShowQrCode(false);
+  };
+
   return (
     <div className="flex flex-col items-center">
       {/* 卡片 */}
-      <div className="flex flex-row w-[200px] h-[72px] p-[12px] rounded-[9px] bg-[#000] mx-[22px]">
+      <div
+        className="flex flex-row w-[200px] h-[72px] p-[12px] rounded-[9px] bg-[#000] mx-[22px]"
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
         <Image className="mr-[12px]" width={48} height={48} src={iconUrl} alt={`${platform}-icon`} />
         <div>
-          <p className="my-[2px] mr-[14px] text-[13px] leading-[18px] text-[rgba(255,255,255,0.7)] text-thin">
+          <p className="my-[2px] mr-[14px] text-[13px] leading-[18px] text-[rgba(255,255,255,0.7)] text-thin cursor-default">
             下载应用
           </p>
-          <p className="text-[16px] font-bold	leading-[22px]">{platform}</p>
+          <p className="text-[16px] font-bold	leading-[22px] cursor-default">{platform}</p>
         </div>
       </div>
 
       {/* 二维码 */}
-      <div className={styles.qrcodeContainer}>
+      <div
+        className={`${styles.qrcodeContainer} ${showQrCode ? 'block' : 'hidden'} transition-opacity duration-500 opacity-100`}
+      >
         {qrCode ? (
           <Image
             className="w-[122px] h-[122px] m-[4px]"

src/app/download/page.tsx

@@ -2,7 +2,7 @@
 
 import Image from 'next/image';
 
-import DownloadCard from './components/download-card';
+import DownloadCard from './components/DownloadCard';
 
 const qrCodeList: Array<DownloadQrcodeCard> = [
   {